jzelldincht
老生
老生
  • UID321
  • 粉丝0
  • 关注0
  • 发帖数6
  • 社区居民
阅读:962回复:2

jQuery中ajax的问题,请教这么做可以吗,有更好的办法吗?

楼主#
更多 发布于:2016-05-26 00:57
这是老师的视频中的截图:

图片:QQ截图20160526002948.png



在3秒和5秒时,如果ajax请求时间足够长,那么会分别执行2个用户提示。

当我在模拟用户登录时,如果时间过短,那么依然会执行老师红框中的代码,为此我想到的解决方案如下:
function setDisplay(time,msg) {
    return setTimeout(function(){
        $submit.prop('disabled', true).text(msg);
    },time);
}
 
var c1 = setDisplay(3000,'请求3秒,请耐心等待...');
var c2 = setDisplay(5000,'请求5秒,马上就有了...');
 
$.ajax({
    url:$form.attr('action'),
    data:$form.serializeArray(),
    dataType:'json',
    type:'POST',
    timeout: outtime,
    beforeSend:function() {
        $submit.prop('disabled', true).text('登录...');
    },
    success:function(result, textStatus) {
        if(result.status === 0) {
            showAlert(result.message);
        } else {
            showAlert(result.message, 'success');
        }
    },
    complete:function(XMLHttpRequest, textStatus) {
        clearInterval(c1);clearInterval(c2);
        $submit.prop('disabled', false).text('登录');
    },
    error:function(XMLHttpRequest, textStatus, errorThrown) {
        switch(textStatus) {
            case 'timeout':
                showAlert('服务器忙,请稍候再试...');
                break;
            case 'error':
                showAlert('服务器错误,请稍候再试...');
                break;
        }
    }
});
我在complete完成时,执行了清楚定时器的效果。在真实的用户体验项目中,请问老师这么实现对吗?
真实的项目中,这种类似的用户体验又是如何设计的呢?
shenyi
管理员
管理员
  • UID1
  • 粉丝17
  • 关注0
  • 发帖数159
沙发#
发布于:2016-05-26 10:42
我记得我课程中 用了setTimeout是为了 模拟 请求时延时。 真实项目中并不需要这个,  就是在 post前 设置按钮状态和文字,譬如使其不可用。在回调时(你无法控制服务器回调需要几秒)恢复button。
会讲故事的程序员
jzelldincht
老生
老生
  • UID321
  • 粉丝0
  • 关注0
  • 发帖数6
  • 社区居民
板凳#
发布于:2016-05-27 06:45
shenyi:我记得我课程中 用了setTimeout是为了 模拟 请求时延时。 真实项目中并不需要这个,  就是在 post前 设置按钮状态和文字,譬如使其不可用。在回调时(你无法控制服务器回调需要几秒)恢复button。回到原帖
好的,谢谢老师,疑问终于搞定了 :)
游客

返回顶部