javascript - 一个ajax请求的时间

Question

有什么方法可以计算 jquery ajax 请求持续了多长时间？有时搜索时间太长，如果搜索时间超过 5 秒，最好添加一个 jquery abort() 按钮。任何方式我都可以做到这一点！

在 ajax 请求的另一端是一个发出 postgresql 请求的 php 文件。

非常感谢您的任何想法！

Answer 1

看看超时选项（http://api.jquery.com/jQuery.ajax/）。您可以在特定调用中设置它，或者使用 $.ajaxSetup() 全局设置。

Answer 2

要让中止按钮在 5 秒后出现，setTimeout请在调用send. AJAX 命令完成后，您可以添加代码以清除超时并删除中止按钮（如果存在）。

var timeOutID = 0;
$.ajax({
  url: 'ajax/test.html',
  success: function(data) {     
    clearTimeOut(timeOutID);
    // Remove the abort button if it exists.
  }
});
timeOutID = setTimeout(function() {
                 // Add the abort button here.
               }, 5000);   

这样，如果 AJAX 足够快地返回，中止按钮将永远不会出现。

Answer 3

通常，一旦发送请求，我会设置一个超时，该超时将在 10 秒左右后触发，然后回退到其他东西以确保它仍然发生（例如，表单提交）。

所以设置一个变量为false， var failed = false;并且在做request请求开始的同时，设置一个超时时间：

setTimeout(function() {
    failed = true;
    $("#form").submit();
    return false;
}, 10000);

在 ajax 调用的返回函数中，检查 failed 变量是否已设置为 true，如果已设置，则实际上不要执行它最初尝试的任何操作，否则可能会搞砸，或混淆用户其他事情正在发生（因为这些事情通常发生在较慢的互联网连接上，如果在加载新页面时出现下一步，他们可能会尝试交互，然后页面会改变）。

$.post("ajaxcall.php", {'etc': "etc"},
    function(returned) {
        if (failed != true) {
            //do whatever with returned variable
        }
});

Answer 4

var timer = 0,
    XHR = $.ajax({
             url: 'ajax/mypage.html',
             beforeSend: function() {
                 timer=setTimeout(showAbort, 5000);
             }
          });

function showAbort() {
    $('<input type="button" value="Abort" id="abort_button"/>').appendTo('#some_parent');
    $('#abort_button').on('click', function() {
         XHR.abort(); //abort the Ajax call
    });
}

XHR.always(function() {  //fires on both fail and done
    clearTimeout(timer);
    if ($('#abort_button').length) {
       $('#abort_button').remove(); //remove button if exists
    }
});