背景:有一個按鈕,點擊之后向后端程序發起Ajax請求,在請求結果沒有返回之前,頁面顯示等待的效果,此時仍舊是異步請求,等待的效果在接收到結果后撤銷。
需求:因為網絡延遲或者后端程序的問題,在發起Ajax請求后,可能等待10s都接收不到數據,現在需要做的就是,如果等待時間超過10s,那么就提示用戶進行其他操作,不用再繼續等待結果,終止Ajax獲取到數據后的操作,即認為Ajax永遠取不到數據了。
解決方案:可以使用Jquery的ajax方法,方法中有timeout和error這兩項,timeout的值是一個Number,表示多少毫秒超時;對應的error的值是一個function,是在執行ajax失敗后的操作,因為指定timeout之后,一旦超時,則認為出現error,所以會執行error綁定的function。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="jquery.min.js"></script> </head> <body> <p id="p1"></p> </body> <script> $.ajax({ url:"test.php", timeout:2000, success:function(data){$("#p1").html(data)}, error:function(){$("#p1").html("wrong")} }); </script> </html>
測試的時候,可以再test.php執行sleep函數,讓ajax在指定時間內取出到結果。
需要注意的是:ajax請求已經發出了,即使timeout,你也是不能中斷請求的,只不過現在你可以不再關心請求的返回結果,因為在timeout之后,即使獲得結果,也不會執行ajax中為success綁定的事件。