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

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

Іноді successфункція працює добре, іноді ні.

Як встановити тайм-аут для цього запиту на ajax? Наприклад, 3 секунди, якщо час вичерпано, то покажіть помилку.

Проблема полягає в тому, що запит ajax заморожує блок до кінця. Якщо сервер трохи не працює, це ніколи не закінчиться.

Прочитайте, будь ласка, $.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). Параметри "timeout", "error", "abort" та "parsererror".

Ось кілька прикладів, які демонструють налаштування та виявлення тайм-аутів у старих та нових парадигмах 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), рядок, що описує тип помилки, що виникає, і необов'язковий об'єкт виключення, якщо такий стався. Можливі значення для другого аргументу (крім нульового) - "timeout", "error", "abort" та "parsererror". Якщо виникає помилка HTTP, errorThrown отримує текстову частину статусу HTTP, наприклад "Не знайдено" або "Помилка внутрішнього сервера". Станом на jQuery 1.5, налаштування помилок може приймати масив функцій. Кожна функція буде викликана по черзі. Примітка. Цей обробник не викликається для міждоменного скрипту та запитів JSONP.

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

Ви можете скористатися 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обробник :)

використовувати повнофункціональну .ajaxфункцію jQuery. порівняйте для прикладу https://stackoverflow.com/a/3543713/1689451 .

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