Ustaw limit czasu dla ajax (jQuery)

$.ajax({
    url: "test.html",
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Czasami successfunkcja działa dobrze, a czasem nie.

Jak ustawić limit czasu dla tego żądania ajax? Na przykład 3 sekundy, jeśli upłynie czas, pokaż błąd.

Problem polega na tym, że żądanie ajax zawiesza blok do momentu zakończenia. Jeśli serwer nie działa przez pewien czas, nigdy się nie skończy.

Proszę przeczytać $.ajax dokumentację , jest to omawiany temat.

$.ajax({
    url: "test.html",
    error: function(){
        // will fire when timeout is reached
    },
    success: function(){
        //do something
    },
    timeout: 3000 // sets timeout to 3 seconds
});

Możesz zobaczyć, jaki rodzaj błędu został zgłoszony, uzyskując dostęp do parametru textStatus error: function(jqXHR, textStatus, errorThrown)opcji. Dostępne opcje to „przekroczenie limitu czasu”, „błąd”, „przerwanie” i „analiza składni”.

Oto kilka przykładów, które pokazują ustawianie i wykrywanie limitów czasu w starych i nowych paradygmatach jQuery.

Live Demo

Obiecuj dzięki jQuery 1.8+

Promise.resolve(
  $.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
  })
).then(function(){
  //do something
}).catch(function(e) {
  if(e.statusText == 'timeout')
  {     
    alert('Native Promise: Failed from timeout'); 
    //do something. Try again perhaps?
  }
});

jQuery 1.8+

$.ajax({
    url: '/getData',
    timeout:3000 //3 second timeout
}).done(function(){
    //do something
}).fail(function(jqXHR, textStatus){
    if(textStatus === 'timeout')
    {     
        alert('Failed from timeout'); 
        //do something. Try again perhaps?
    }
});​

jQuery <= 1.7.2

$.ajax({
    url: '/getData',
    error: function(jqXHR, textStatus){
        if(textStatus === 'timeout')
        {     
             alert('Failed from timeout');         
            //do something. Try again perhaps?
        }
    },
    success: function(){
        //do something
    },
    timeout:3000 //3 second timeout
});

Zauważ, że parametr textStatus (lub jqXHR.statusText ) poinformuje cię, jaki był błąd. Może to być przydatne, jeśli chcesz wiedzieć, że awaria została spowodowana przekroczeniem limitu czasu.

błąd (jqXHR, textStatus, errorThrown)

Funkcja, która ma zostać wywołana, jeśli żądanie nie powiedzie się. Funkcja otrzymuje trzy argumenty: obiekt jqXHR (w jQuery 1.4.x, XMLHttpRequest), łańcuch opisujący typ błędu, który wystąpił, oraz opcjonalny obiekt wyjątku, jeśli taki wystąpił. Możliwe wartości drugiego argumentu (oprócz null) to „limit czasu”, „błąd”, „przerwanie” i „analiza składni”. Gdy wystąpi błąd HTTP, errorThrown otrzymuje tekstową część statusu HTTP, taką jak „Nie znaleziono” lub „Wewnętrzny błąd serwera”. Począwszy od jQuery 1.5, ustawienie błędu może akceptować tablicę funkcji. Każda funkcja będzie wywoływana kolejno. Uwaga: ten moduł obsługi nie jest wywoływany dla skryptów między domenami i żądań JSONP.

src: http://api.jquery.com/jQuery.ajax/

Możesz użyć timeoutustawienia w opcjach ajax, takich jak to:

$.ajax({
    url: "test.html",
    timeout: 3000,
    error: function(){
        //do something
    },
    success: function(){
        //do something
    }
});

Przeczytaj wszystko o opcjach ajax tutaj: http://api.jquery.com/jQuery.ajax/

Pamiętaj, że gdy nastąpi przekroczenie limitu czasu, errormoduł obsługi jest wyzwalany, a nie successmoduł obsługi :)

użyj w pełni funkcjonalnej .ajaxfunkcji jQuery. porównaj na przykład z https://stackoverflow.com/a/3543713/1689451 .

bez testowania, po prostu łącząc kod z przywoływanym pytaniem SO:

target = $(this).attr('data-target');

$.ajax({
    url: $(this).attr('href'),
    type: "GET",
    timeout: 2000,
    success: function(response) { $(target).modal({
        show: true
    }); },
    error: function(x, t, m) {
        if(t==="timeout") {
            alert("got timeout");
        } else {
            alert(t);
        }
    }
});​