Question

我尝试通过带有超时的ajax调用加载脚本，如果超时后调用失败，则我中止该调用，但是当我检查“网络”标签时，我可以看到js的状态仍处于待处理状态，并且页面加载程序仍在加载。

我正尝试加载的脚本文件是来自中国的google map API，如果请求失败，我会加载该API的中文版本，并且可以正常工作，但是要花费一分多钟才能停止该页面的加载并显示下方的消息。

jquery.min.js：2 GET https://maps.googleapis.com/maps/api/js?key=“-mykey ---”＆libraries = places＆_ = 1553093568934 net :: ERR_TIMED_OUT

我的加载和中止代码如下

var xhr = $.ajax({
    url: "https://maps.googleapis.com/maps/api/js?key=keyyy&libraries=places",
    dataType: "script",
    timeout: 5000
  }).done(function() {
    //do stuff
    console.log("loaded");
  })
  .fail(function() {
    //do stuff
    console.log("fail");
    xhr.abort();
    $.ajax({
      url: "https://maps.google.cn/maps/api/js?key=keyy&libraries=places",
      dataType: "script",
      timeout: 5000
    }).done(function() {
      //do stuff
      console.log("loaded");

    })

  });

我也尝试过

        var xhr = $.ajax({
            url: "https://maps.googleapis.com/maps/api/js?key=key&libraries=places",
            dataType: "script",
            timeout: 5000,
            success:function(){

            },
            error:function(a,b,c){
                //do stuff
                console.log("fail");
                console.log(a,b,c);
                console.log(xhr.state());
                xhr.abort();
                console.log(xhr.state());
                $.ajax({
                    url: "https://maps.google.cn/maps/api/js?key=key&libraries=places",
                    dataType: "script",
                    timeout: 5000,
                    success:function(){
                        console.log("loaded chinese")
                    },
                    error:function(a,b,c){

                    }
                })
            }
        })

Answer 1

根据您的代码，直到请求失败或在5000ms之后超时，您的异常终止都不会被击中，但是您需要一个错误处理程序来捕获超时。

查看此帖子以了解如何处理超时属性：Set timeout for ajax (jQuery)

查看此帖子以了解有关中止请求的更多信息：Abort Ajax requests using jQuery

即使中止调用，Jquery Ajax脚本请求仍然会加载（挂起状态）

1 个答案: