Đặt thời gian chờ cho ajax (jQuery)

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

Đôi khi successchức năng hoạt động tốt, đôi khi không.

Làm cách nào để đặt thời gian chờ cho yêu cầu ajax này? Ví dụ: 3 giây, nếu hết thời gian, sau đó hiển thị lỗi.

Vấn đề là, ajax yêu cầu đóng băng khối cho đến khi kết thúc. Nếu máy chủ ngừng hoạt động trong một thời gian ngắn, nó sẽ không bao giờ kết thúc.

Xin vui lòng đọc $.ajax tài liệu , đây là một chủ đề được bảo hiểm.

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

Bạn có thể xem loại lỗi nào được đưa ra bằng cách truy cập tham số textStatus của error: function(jqXHR, textStatus, errorThrown)tùy chọn. Các tùy chọn là "hết thời gian", "lỗi", "hủy bỏ" và "trình phân tích cú pháp".

Dưới đây là một số ví dụ minh họa việc thiết lập và phát hiện thời gian chờ trong mô hình cũ và mới của jQuery.

Live Demo

Hứa với 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
});

Lưu ý rằng textStatus param (hoặc jqXHR.statusText ) sẽ cho bạn biết lỗi là gì. Điều này có thể hữu ích nếu bạn muốn biết rằng sự thất bại là do thời gian chờ.

lỗi (jqXHR, textStatus, errorThrown)

Một chức năng được gọi nếu yêu cầu không thành công. Hàm nhận được ba đối số: Đối tượng jqXHR (trong jQuery 1.4.x, XMLHttpRequest), một chuỗi mô tả loại lỗi xảy ra và một đối tượng ngoại lệ tùy chọn, nếu xảy ra. Các giá trị có thể có cho đối số thứ hai (ngoài null) là "hết thời gian", "lỗi", "hủy bỏ" và "trình phân tích cú pháp". Khi xảy ra lỗi HTTP, errorThrown nhận phần văn bản của trạng thái HTTP, chẳng hạn như "Không tìm thấy" hoặc "Lỗi máy chủ nội bộ". Kể từ jQuery 1.5, cài đặt lỗi có thể chấp nhận một loạt các hàm. Mỗi chức năng sẽ được gọi lần lượt. Lưu ý: Trình xử lý này không được gọi cho các yêu cầu JSONP và tên miền chéo.

src: http://api.jquery.com/jQuery.ajax/

Bạn có thể sử dụng timeoutcài đặt trong các tùy chọn ajax như thế này:

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

Đọc tất cả về các tùy chọn ajax tại đây: http://api.jquery.com/jQuery.ajax/

Hãy nhớ rằng khi thời gian chờ xảy ra, errortrình xử lý được kích hoạt chứ không phải successtrình xử lý :)

sử dụng .ajaxhàm jQuery đầy đủ tính năng. so sánh với https://stackoverflow.com/a/3543713/1689451 để làm ví dụ.

không cần kiểm tra, chỉ cần hợp nhất mã của bạn với câu hỏi SO được tham chiếu:

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);
        }
    }
});​