$.ajax()——超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。

常见的做法是：

1、设置超时时间，一旦时间超过设定值，便终止请求；
2、页面内容加载之前，手动增加一个 loading 层。

代码如下：

getAjax: function (method,apiUrl,options,callback) {
        var xhr = $.ajax({
            type: method,url: apiUrl,data: options,timeout: 5000,// 设置超时时间
            dataType: "json",beforeSend: function (xhr) {
                $.showLoading();    // 数据加载成功之前，使用loading组件
            },success: function(json) {
                $.hideLoading();    // 成功后，隐藏loading组件
                if(callback && callback instanceof Function === "true") {
                    callback(json);
                }
            },error: function (textStatus) {
                console.error(textStatus);
            },complete: function (XMLHttpRequest,status) {
                if(status == 'timeout') {
                    xhr.abort();    // 超时后中断请求
                    $.alert("网络超时，请刷新",function () {
                        location.reload();
                    })
                }
            }
        })
    }

转自：http://www.cnblogs.com/fayin/p/6387044.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!