ajax設置超時（jQuery）

Question

$.ajax({ 
    url: "test.html", 
    error: function(){ 
     //do something 
    }, 
    success: function(){ 
     //do something 
    } 
}); 

有時success函數有效，有時不行。

如何爲此ajax請求設置超時？例如，3秒鐘，如果時間到了，然後顯示錯誤。

問題是，ajax請求凍結塊直到完成。如果服務器停機一段時間，它將永遠不會結束。

Answer 1

請閱讀$.ajaxdocumentation，這是一個涵蓋的主題。

$.ajax({ 
    url: "test.html", 
    error: function(){ 
     // will fire when timeout is reached 
    }, 
    success: function(){ 
     //do something 
    }, 
    timeout: 3000 // sets timeout to 3 seconds 
}); 

你可以看到什麼類型的錯誤是由訪問error: function(jqXHR, textStatus, errorThrown)選項的textStatus參數拋出。選項有「超時」，「錯誤」，「中止」和「解析錯誤」。

Answer 2

下面是一些示例，演示如何在jQuery的新舊範例中設置和檢測超時。

Live Demo

承諾與jQuery 1.8+

Promise.resolve(
    $.ajax({ 
    url: '/getData', 
    timeout:3000 //3 second timeout 
    }) 
).then(function(){ 
    //do something 
}).catch(function(e) { 
    if(e.statusText == 'timeout') 
    {  
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps? 
    } 
}); 

jQuery的1.8+

$.ajax({ 
    url: '/getData', 
    timeout:3000 //3 second timeout 
}).done(function(){ 
    //do something 
}).fail(function(jqXHR, textStatus){ 
    if(textStatus === 'timeout') 
    {  
     alert('Failed from timeout'); 
     //do something. Try again perhaps? 
    } 
});​ 

jQuery的< = 1.7.2

$.ajax({ 
    url: '/getData', 
    error: function(jqXHR, textStatus){ 
     if(textStatus === 'timeout') 
     {  
      alert('Failed from timeout');   
      //do something. Try again perhaps? 
     } 
    }, 
    success: function(){ 
     //do something 
    }, 
    timeout:3000 //3 second timeout 
}); 

注意，textStatus參數（或jqXHR.statusText）將讓你知道是什麼錯誤。如果您想知道失敗是由超時引起的，這可能很有用。

誤差（jqXHR，textStatus，errorThrown）

一個函數，如果 請求失敗被調用。該函數接收三個參數：jqXHR（ jQuery 1.4.x，XMLHttpRequest）對象，描述發生的 錯誤類型的字符串以及可選的異常對象（如果發生）。 第二個參數（除了null）的可能值是「超時」， 「錯誤」，「中止」和「parsererror」。發生HTTP錯誤時， errorThrown收到HTTP狀態的文本部分，例如 「未找到」或「內部服務器錯誤」。從jQuery 1.5開始，錯誤 設置可以接受一組函數。每個函數依次被稱爲 。注意：此處理程序不針對跨域腳本和JSONP請求調用。

源：http://api.jquery.com/jQuery.ajax/

Answer 3

你可以在這樣的AJAX選項使用timeout設置：

$.ajax({ 
    url: "test.html", 
    timeout: 3000, 
    error: function(){ 
     //do something 
    }, 
    success: function(){ 
     //do something 
    } 
}); 

閱讀所有關於AJAX選擇這裏：http://api.jquery.com/jQuery.ajax/

請記住，當發生超時，error處理程序被觸發，而不是success處理程序:)

Answer 4

使用全功能的.ajax jQuery功能。例如， 與https://stackoverflow.com/a/3543713/1689451進行比較。

未經測試，只是合併與引用的SO問題代碼：

target = $(this).attr('data-target'); 

$.ajax({ 
    url: $(this).attr('href'), 
    type: "GET", 
    timeout: 2000, 
    success: function(response) { $(target).modal({ 
     show: true 
    }); }, 
    error: function(x, t, m) { 
     if(t==="timeout") { 
      alert("got timeout"); 
     } else { 
      alert(t); 
     } 
    } 
});​