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

?

轉載于:https://www.cnblogs.com/zhangruiqi/p/7845592.html

總結

以上是生活随笔為你收集整理的jquery-ajax请求：超时设置，增加 loading 提升体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。