Tetapkan batas waktu untuk ajax (jQuery)

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

Terkadang successfungsi bekerja dengan baik, terkadang tidak.

Bagaimana cara menetapkan batas waktu untuk permintaan ajax ini? Misalnya, 3 detik, jika waktu habis, maka tunjukkan kesalahan.

Masalahnya adalah, permintaan ajax membekukan blok sampai selesai. Jika server dimatikan sebentar, itu tidak akan pernah berakhir.

Silakan baca $.ajax dokumentasinya , ini adalah topik yang dibahas.

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

Anda dapat melihat jenis kesalahan apa yang dilemparkan dengan mengakses parameter textStatus dari error: function(jqXHR, textStatus, errorThrown)opsi. Opsinya adalah "batas waktu", "kesalahan", "batalkan", dan "parsererror".

Berikut adalah beberapa contoh yang menunjukkan pengaturan dan mendeteksi batas waktu dalam paradigma lama dan baru jQuery.

Live Demo

Janji dengan 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
});

Perhatikan bahwa param textStatus (atau jqXHR.statusText ) akan memberi tahu Anda apa kesalahannya. Ini mungkin berguna jika Anda ingin tahu bahwa kegagalan itu disebabkan oleh batas waktu.

kesalahan (jqXHR, textStatus, errorThrown)

Suatu fungsi untuk dipanggil jika permintaan gagal. Fungsi menerima tiga argumen: Objek jqXHR (dalam jQuery 1.4.x, XMLHttpRequest), string yang menjelaskan jenis kesalahan yang terjadi dan objek pengecualian opsional, jika ada. Nilai yang mungkin untuk argumen kedua (selain nol) adalah "batas waktu", "kesalahan", "batalkan", dan "pengurai". Ketika kesalahan HTTP terjadi, errorThrown menerima bagian tekstual dari status HTTP, seperti "Tidak Ditemukan" atau "Kesalahan Server Internal." Pada jQuery 1.5, pengaturan kesalahan dapat menerima berbagai fungsi. Setiap fungsi akan dipanggil secara bergantian. Catatan: Handler ini tidak dipanggil untuk skrip lintas-domain dan permintaan JSONP.

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

Anda dapat menggunakan timeoutpengaturan di opsi ajax seperti ini:

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

Baca semua tentang opsi ajax di sini: http://api.jquery.com/jQuery.ajax/

Ingatlah bahwa ketika timeout terjadi, errorpawang dipicu dan bukan successpawang :)

gunakan .ajaxfungsi jQuery berfitur lengkap . bandingkan dengan https://stackoverflow.com/a/3543713/1689451 sebagai contoh.

tanpa pengujian, cukup gabungkan kode Anda dengan pertanyaan SO yang dirujuk:

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);
        }
    }
});​