Come gestire la risposta lenta di ajax sulla condivisione div con più funzioni

Question

Sto avendo un div.

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

Avere poche funzioni.

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

Funzione ricevere chiamata su un diverso clic del pulsante.

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

Quando btn1, btn2, premere btn3 immediatamente uno dopo l'altro, posso vedere div 'prova' contenere come prima risposta 'fun1' dopo qualche tempo 'fun2' risposta e così via.

Conosco il motivo, poiché la mia risposta ajax è molto lenta, ecco perché sta accadendo.

Quando qualcuno fa clic su btn1 e prima di ottenere la risposta di fun1, premere btn2. In questo caso voglio solo caricare la risposta fun2. Se fun2 sta facendo ritardare vuole mostrare la pagina vuota.

Stavo pensando di uccidere la richiesta di ajax rimanente, alla pressione del pulsante. Ma allo stesso tempo sta andando anche la mia altra richiesta di ajax, non voglio ucciderli. Quindi uccidere altre richieste Ajax non funzionerà per me. Quale sarà l'altra soluzione.

Answer 1

OK avete due problemi

1: si sparano più richieste quando in realtà si vuole solo l'ultimo di andare elaborare

2: ogni evento aggiorna lo schermo indipendentemente da ciò che altro è successo

Suggerisco di attaccare questi due problemi separatamente.

Innanzitutto, aggiungere una funzione di richiamata per la risposta. questo ti permetterà di verificare le condizioni (come 'è successo qualcos'altro?') prima di aggiornare la pagina. Questo ti dà la possibilità di lanciare il primo a risposte.

In secondo luogo, è necessario gestire l'invio delle richieste multiple in primo luogo. È possibile annullarli quando si fa clic sul secondo pulsante (ma verranno comunque elaborati sul server) OPPURE: è possibile aggiungere un timer e non inviare immediatamente la richiesta.

Avviare il timer quando si fa clic sul pulsante e quindi si dice 200 ms? successivamente, attiva la richiesta ed elabora la risposta.

Se si ottiene un altro clic prima che siano trascorsi i 200 ms, dimenticare il primo timer e avviarne uno nuovo.

In alternativa, è possibile impedire all'utente di fare clic sui pulsanti una volta inviata una richiesta, disattivandoli e riattivandoli solo una volta ricevuta la risposta.

ad esempio: (bit grezzo con vars globali che conosco)

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