Jak obsługiwać powolną odpowiedź ajax na dzielenie div przez wiele funkcji

Question

Mam jeden div.

<div id="test"></div> 

Posiadanie kilku funkcji.

fun1() 
{ 
    $('#test').html(''); 
    $.ajax(function(){ 
    url : abc/index; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 
fun2() 
{ 
    $('#test').html(''); 
    $.ajax(function(){ 
    url : abc/getDetail; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 
fun3() 
{ 
$('#test').html(''); 
    $.ajax(function(){ 
    url : abc/getUser; 
    success : function(response){ 
     $('#test').html(response); 
    } 
    }); 
} 

Funkcja uzyskać połączenie na inny przycisk kliknij.

btn1.click(fun1()) 
btn2.click(fun2()) 
btn3.click(fun3()) 

Kiedy btn1, btn2, btn3 naciśnij natychmiast jeden po drugim, widzę div „test” zawierają jako pierwszy „” fun1 odpowiedzi po pewnym czasie „fun2” reakcji i tak dalej.

Znam przyczynę, ponieważ moja odpowiedź ajax jest bardzo powolna, dlatego tak się dzieje.

Kiedy ktoś kliknie na btn1 i zanim otrzyma odpowiedź fun1, naciśnij btn2. W tym przypadku chcę tylko załadować odpowiedź fun2. Jeśli fun2 robi opóźnienie, chce pokazać pustą stronę.

Myślałem o zabiciu pozostałej prośby o ajax, po naciśnięciu przycisku. Ale w tym samym czasie moje inne prośby o ajax również się sprawdzają, nie chcę ich zabijać. Więc zabijanie innych żądań ajaxowych nie będzie działać dla mnie. Jakie będzie inne rozwiązanie.

Answer 1

OK masz dwa problemy

1: jesteś wypalania wiele żądań od kiedy naprawdę chcą tylko ostatnim, który go być przetwarzane

2: każde zdarzenie aktualizuje ekran niezależnie od tego, co jeszcze działo się

Sugeruję, aby zaatakować te dwa problemy osobno.

Najpierw należy dodać funkcję oddzwonienia dla odpowiedzi. to pozwoli ci sprawdzić warunki (takie jak "czy coś jeszcze się stało?") przed aktualizacją strony. Daje to szansę na wyrzucenie pierwszego do odpowiedzi.

Po drugie, musisz najpierw zająć się wysyłaniem wielu wniosków. Możesz je anulować po kliknięciu drugiego przycisku (ale nadal będą one przetwarzane na serwerze) LUB: Możesz dodać licznik czasu i nie wysyłać natychmiast żądania.

Uruchom minutnik po kliknięciu przycisku, a następnie powiedz 200ms? później, odpal żądanie i przetwórz odpowiedź.

Jeśli klikniesz jeszcze raz przed upływem 200 ms, zapomnij o pierwszym zegarku i rozpocznij nowy.

Można również zablokować przyciski użytkownika po wysłaniu żądania, dezaktywując je i ponownie aktywując dopiero po otrzymaniu odpowiedzi.

np: (nieco surowy z Vars globalnych wiem)

var btnLastPressed =0 
    fun1() 
    { 
     btnLastPressed = 1; 
     $('#test').html(''); 
     $.ajax(function(){ 
     url : abc/index; 
     success : function(response) { finished(1,response);} 
     }); 
    } 

    function finished(btn, response){ 
     if(btnLastPressed==1){ 
      $('#test').html(response); 
     } 
    }