Установите тайм-аут для ajax (jQuery)

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

Иногда функция success работает хорошо, иногда нет.

Как установить таймаут для этого запроса ajax? В примере, 3 секунды, если время отсутствует, затем покажите ошибку.

Проблема заключается в том, что запрос ajax блокирует блок до завершения. Если сервер не работает в течение короткого времени, он никогда не закончится.

Ответ 1

Прочтите $.ajax документацию, это охваченная тема.

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

Вы можете увидеть, какой тип ошибки был сброшен, обратившись к параметру textStatus параметра error: function(jqXHR, textStatus, errorThrown). Возможные значения: "тайм-аут", "ошибка", "прервать" и "parsererror".

Ответ 2

Вот несколько примеров, демонстрирующих установку и обнаружение тайм-аутов в старых и новых парадигмах jQuery.

Live Demo

Обещать с помощью 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
});

Обратите внимание, что параметр textStatus (или jqXHR.statusText) позволит вам узнать, что произошло. Это может быть полезно, если вы хотите знать, что отказ был вызван таймаутом.

ошибка (jqXHR, textStatus, errorThrown)

Функция, вызываемая, если запрос не выполняется. Функция получает три аргумента: jqXHR (в jQuery 1.4.x, XMLHttpRequest), строка, описывающая тип произошла ошибка и дополнительный объект исключения, если он произошел. Возможные значения для второго аргумента (кроме нуля) - это "тайм-аут", "error", "abort" и "parsererror". Когда возникает ошибка HTTP, errorThrown получает текстовую часть статуса HTTP, например "Не найдено" или "Внутренняя ошибка сервера". Начиная с jQuery 1.5, ошибка настройка может принимать множество функций. Каждая функция будет называться в очереди. Примечание. Этот обработчик не вызывается для междоменного script и Запросы JSONP.

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

Ответ 3

Вы можете использовать параметр timeout в параметрах ajax, например:

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

Читайте все о параметрах ajax здесь: http://api.jquery.com/jQuery.ajax/

Помните, что когда происходит тайм-аут, обработчик error запускается, а не обработчик success:)

Ответ 4

используйте полнофункциональную функцию .ajax jQuery. сравните с fooobar.com/info/34297/... для примера.

без тестирования, просто слияние вашего кода с указанным вопросом 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);
        }
    }
});