Pertanyaan Batalkan permintaan AJAX dalam penerbangan menggunakan Jquery .ajax? [duplikat]


Kemungkinan Duplikat:
Bunuh permintaan Ajax menggunakan JavaScript menggunakan jQuery 

Berikut adalah kode sederhana yang saya kerjakan:

$("#friend_search").keyup(function() {

    if($(this).val().length > 0) {
        obtainFriendlist($(this).val());
    } else {
        obtainFriendlist("");
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       }
     });
}

Pada dasarnya, jika peristiwa kunci dipicu sebelum fungsi memperolehFriendlist mengembalikan hasil (dan memicu UIDisplayFriends (msg), saya harus membatalkan permintaan dalam penerbangan. Masalah yang saya hadapi adalah bahwa mereka membangun, dan kemudian tiba-tiba fungsi UIDisplayFriends dipecat berulang kali.

Terima kasih banyak, dan saran juga sangat membantu


32
2017-11-05 22:50


asal


Jawaban:


Nilai kembalian dari $.ajax adalah objek XHR yang dapat Anda panggil tindakan. Untuk membatalkan fungsi Anda akan melakukan sesuatu seperti:

var xhr = $.ajax(...)
...
xhr.abort()

Mungkin pintar menambahkan beberapa debouncing juga untuk mengurangi beban di server. Berikut ini hanya akan mengirim panggilan XHR hanya setelah pengguna berhenti mengetik untuk 100ms.

var delay = 100,
    handle = null;

$("#friend_search").keyup(function() {
    var that = this;
    clearTimeout(handle);
    handle = setTimeout(function() {
        if($(that).val().length > 0) {
            obtainFriendlist($(that).val());
        } else {
            obtainFriendlist("");
        }
    }, delay);
});

Hal ketiga yang harus Anda lakukan adalah memfilter tanggapan XHR berdasarkan apakah permintaan itu masih valid atau tidak:

var lastXHR, lastStrseg;

function obtainFriendlist(strseg) {
    // Kill the last XHR request if it still exists.
    lastXHR && lastXHR.abort && lastXHR.abort();

    lastStrseg = strseg;
    lastXHR = $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){

        // Only display friends if the search is the last search.
        if(lastStrseg == strseg) 
          UIDisplayFriends(msg);
       }
     });
}

20
2017-11-05 22:58



Bagaimana tentang menggunakan variabel, katakan isLoading, yang Anda tetapkan ke true melalui menggunakan opsi beforeSend (jqXHR, pengaturan) untuk .ajax, dan kemudian menggunakan pengaturan lengkap untuk mengatur variabel kembali ke false. Lalu Anda hanya memvalidasi terhadap variabel itu sebelum Anda memicu panggilan ajax lain?

var isLoading = false;
$("#friend_search").keyup(function() {

    if (!isLoading) {
       if($(this).val().length > 0) {
           obtainFriendlist($(this).val());
       } else {
           obtainFriendlist("");
       }
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       beforeSend: function () { isLoading = true; },
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       },
       complete: function() { isLoading = false; }
     });
}

0
2017-11-05 22:56