javascript - 检测 ajax 成功函数何时需要超过 5 秒并重定向

Question

您好，我有一个脚本，可以在不加载页面的情况下通过 href 从一页移动。

它工作得很好，但如果 Ajax 响应时间超过 5 秒，我想重定向到请求的页面，这通常是由于互联网连接速度慢造成的。在这种情况下:停止脚本并正常加载页面。

首先是href:

<a href="new.php" rel="tab">new</a>
<a href="new1.php" rel="tab">New 1</a>  

这是脚本:

<script>
$(function(){ 
  $("a[rel='tab']").click(function(e){
    pageurl = $(this).attr('href'); //get the href clicked
    $.ajax({url:pageurl+'?rel=tab',
      success: function(data){
        $('#mole').html(data); 
      }
    }); 
    if(pageurl!=window.location){
      window.history.pushState({
        path:pageurl
      },'',pageurl);    
    }
    return false;  
  });
});

$(window).bind('popstate', function(){
  $.ajax({
    url:location.pathname+'?rel=tab',
    success: function(data){
      // here how do I detect if the success takes longer than 5 seconds
      // stop the script and load the page normally which is the URL parameter in ajax
      $('#mole').html(data); 
    }
  }); 
}); 
</script>

Answer 1

首先，我们需要向 ajax 处理程序添加超时，以便它会在 5 秒后取消请求(这里我们使用 5000 表示毫秒)。然后，根据docs ，转到error，您可以看到第二个参数是textStatus。如果是超时，则等于“timeout”。这可能是您完成所需任务的最简单途径。根据您的功能需要更新错误处理程序。

$(window).bind('popstate', function() {
    var url = location.pathname + '?rel=tab';
    $.ajax({
        timeout: 5000,
        url: url,
        success: function(data) {
            $('#mole').html(data);
        },
        error: function(jqXHR, textStatus) {
            if (textStatus === 'timeout') {
                // we know the ajax failed due to a timeout,
                // do what you need here, below is an example.
                window.location = url;
            }
        }
    });
});