jquery - 如果 ajax 在一段时间后没有成功，我该如何取消它并执行操作？

Question

我有一个 jQuery ajax 调用，如下所示:

jQuery( document ).on( 'mouseover', '#wp-admin-bar-noti-bar-new', function() {

  jQuery.ajax({
    url: "domain.com",
    // etc
    success:function(data){

        // change element id
        jQuery('#wp-admin-bar-noti-bar-new').attr('id','wp-admin-bar-noti-bar');
    }
  });
});

所以如果ajax调用成功，它就会改变元素。我的问题是，如果 10 秒后调用不成功，我该如何做到这一点，它应该取消它并执行某些操作(例如显示警报)。

我该怎么做？

Answer 1

您可以在 AJAX 调用上设置超时并处理该错误情况。

jQuery.ajax({
    url: 'domain.com',
    timeout: 10000, // ten seconds in milliseconds
    .
    .
    .
    error: function(request, status, err) {
        if (status === "timeout") {
            alert("Timeout");
        }
    }
});

注意，我使用了 this answer ，部分是为了制定我的答案。

一旦发送 AJAX 请求，它们就会被发送。您实际上不能在服务器端对它们做太多事情(请参阅 this answer )。

但是，您可以在客户端取消它们。 request 参数是一个 jqXHR 对象，它允许您中止调用使用 request.abort(); 所以你的函数看起来像这样:

error: function(request, status, err) {
    if (status === "timeout") {
        request.abort();
        alert("Timeout");
    }
}