-2

I tried to load a script via ajax call with a timeout, if the calls fail after timeout then I abort the call, but when I inspected the network tab I can see the status of the js is still pending and also the pages loader still loads.

enter image description here

The script file I was trying to load is google map API from China, if the request fails I load the Chinese version of API and it works fine, but it takes more than one minute to stop the page loading and to show the below message.

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

My code for loading and aborting is below

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");

    })

  });

I also tried this

        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){

                    }
                })
            }
        })
suhail c
  • 1,169
  • 2
  • 16
  • 40

1 Answers1

0

According to your code, your abort won't get hit until the request fails, or times out after 5000ms, but you need an error handler to catch the timeout.

Check this post for how to handle the timeout property: Set timeout for ajax (jQuery)

Check this post for more info on aborting the request: Abort Ajax requests using jQuery

NickAndrews
  • 496
  • 2
  • 9
  • I added timeout for the first call and after 5 seconds, the second ajax call is called but the first call is still at pending state. The fail function for the first call is the error handler , inside that i m aborting the request. – suhail c Mar 20 '19 at 15:54
  • I tried your code, and it never hits the fail handler, you may need to try and catch it in the done handler. – NickAndrews Mar 20 '19 at 16:03
  • To hit the fail you need to try it from a VM located in China. – suhail c Mar 20 '19 at 16:04