2012-03-20 12 views
6

Ho scritto una funzione che effettua una richiesta asincrona usando jQuery.callback asincroni

var Site = { 

    asyncRequest : function(url, containerId) {   
     $.ajax({ 
      url : url, 
      onSuccess: function(data){ 
       $(containerId).html(data); 
      } 
     }); 
    } 
} 

La sintassi potrebbe essere leggermente errata poiché sto utilizzando il blocco note, ma si spera che tu abbia l'idea.

chiamo la funzione:

Site.asyncRequest('someurl', container1); 
Site.asyncRequest('someurl', container2); 

Entrambe le richieste vengono inviati ed elaborati dal server. Due risposte vengono rispedite, che è quello che mi aspetto. Tuttavia, mi aspetto che container1 e container2 contengano le risposte di entrambe le richieste.

Il problema è che viene visualizzata solo l'ultima risposta e non riesco a capire perché. Non so come jQuery ajax tenga traccia delle richieste/risposte, quindi forse questo è un problema.

Dire che faccio 5 o 10 richieste, come fa jQuery ajax a sapere quale risposta è per quale richiesta e dove tiene traccia di essa?

si

+0

Ciao, grazie. Potrei provare a passare una funzione come parametro e quindi chiamare quella funzione da OnSuccess. Vedrò se riesco a farlo funzionare. La mia preoccupazione principale è che non riesco facilmente a fare il debug e tenere traccia di ciò che sta accadendo. –

risposta

5

Questo sembra essere un problema di scoping Javascript. Provare quanto segue:

var Site = { 
    asyncRequest: function(url, containerId) { 
     (function(theContainer) { 
      $.ajax({ 
       url: url, 
       onSuccess: function(data) { 
        $(theContainer).html(data); 
       } 
      }); 
     })(containerId); 
    } 
}; 

Questo crea un ambito separato per ogni chiamata di funzione, in modo che il valore effettivo puntato da "theContainer" è diverso per ogni funzione anonima onSuccess.

+0

@SheikhHeera, questo non è il caso, in realtà, per un motivo un po 'oscuro: il metodo '' .ajax'' sta usando il parametro '' url'' all'interno dell'evento corrente del ciclo degli eventi mentre '' containerId''/Il valore '' theContainer'' viene utilizzato in un altro evento più avanti nel ciclo degli eventi. Poiché Javascript è un singolo thread, è impossibile che il parametro '' url'' sia diverso da quello che intendevamo. Dovremmo solo ri-orientare il '' url'' se la funzione '' onSuccess'' fosse necessaria per farne uso. –

1

Grazie Quello che sta accadendo qui è un singolo di chiusura è sempre creato, a causa del modo in cui viene dichiarato che la funzione. Vedere "Un esempio più avanzato" qui: http://skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/

Fondamentalmente, lo containerId viene condiviso tra tutte le istanze di quella funzione anonima onSuccess. Non ho provato questo, ma credo che se tu definissi la tua funzione asyncRequest al di fuori di Site, ciò funzionerebbe.

Per quanto riguarda una soluzione più elegante a questo problema, forse qualcun altro risponderà meglio.