前端发送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();

                    })

                }

            }

        })

    }

随机推荐

1. JS 判断字串字节数，并截取长度

   var matchWords;         function notifyTextLength() {             var inputNum = document.getElement ...

2. AMR 转mp3 失败

   private void changeToMp3(String sourcePath) { File source = new File(sourcePath); String mp3TargetPa ...

3. LICEcap

   LICEcap是一款简洁易用的动画屏幕录制软件,它可将屏幕录像的内容直接保存为高质量(每帧颜色数量可超过256)GIF动态图片格式.并且支持特别标记鼠标操作动态效果.

4. Codeforces Round #311 (Div. 2) E. Ann and Half-Palindrome 字典树/半回文串

   E. Ann and Half-Palindrome Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...

5. [C入门 - 游戏编程系列] 贪吃蛇篇(二) - 食物定义

   游戏中的食物没有那么多复杂属性,特别是贪吃蛇游戏中,我把食物看待的很简单: 1. 它必须属于世界,才能出现在世界.不可能一个不属于世界的食物,出现在世界中:但是可能存在着一个食物,它属于世界,但是却没 ...

6. TCP数据包结构

   源端口号( 16 位):它(连同源主机 IP 地址)标识源主机的一个应用进程.目的端口号( 16 位):它(连同目的主机 IP 地址)标识目的主机的一个应用进程.这两个值加上 IP 报头中的源主机 I ...

7. python正则表达式例子说明

   pattern = re.compile('<div.*?author">.*?<a.*?<img.*?>(.*?)</a>.*?<div.* ...

8. LeetCode 606&period; Construct String from Binary Tree （建立一个二叉树的string）

   You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

9. Installing Supervisor and Superlance on CentOS

   Installing Supervisor1 and Superlance2 on CentOS/RHEL/Fedora can be a little tricky, as the versions ...

10. sping&lowbar;依赖注入的三种方式

    1.  set注入:通过setxxx()给属性赋值 <!--id是对象--> <!--class是类--> <bean id = "student" ...