背景:有一個按鈕,點擊之后向后端程序發起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綁定的事件。
