Javascript: modalità non bloccante per attendere che una condizione sia vera

Question

Ho diversi UpdatePanels ASP.NET, ciascuno con un AsyncPostBackTrigger legato allo stesso evento click server. Poiché solo un UpdatePanel può fare il suo lavoro alla volta, io uso .get_isInAsyncPostBack() dello PageRequestManager per impedire a un utente di accedere a un'altra parte della pagina fino al completamento del postback async.

Un'altra parte di questa pagina deve aggiornare in modo dinamico più pannelli di aggiornamento in modo consecutivo. Poiché i pannelli di aggiornamento utilizzano trigger asincroni, la chiamata __doPostBack("<%=ButtonName.ClientID %>", 'PanelId'); viene attivata in modo asincrono. Per questo motivo, passerà rapidamente alla successiva iterazione del ciclo e tenterà di aggiornare il pannello successivo. Tuttavia, la seconda iterazione fallisce perché c'è già un altro pannello di aggiornamento che fa un postback asincrono.

Idealmente, ci sarebbe un modo per attendere che .get_isInAsyncPostBack() restituisca false senza bloccare altre attività del client.

La ricerca mi ha portato a molte persone con il mio problema, quasi tutti i quali sono invitati a utilizzare setTimeOut(). Non penso che questo funzionerà per me. Non voglio aspettare un intervallo di tempo specificato prima di eseguire una funzione. Voglio semplicemente che il mio Javascript attenda mentre è in esecuzione un altro script, preferibilmente attendere fino a quando una condizione specifica è vera.

Capisco che molti probabilmente vorranno suggerire di ripensare il mio modello. In realtà non è il mio modello, ma quello che è stato consegnato al nostro team di sviluppo che attualmente è un disastro totale sotto il cofano. A causa dei limiti temporali, la riscrittura del modello non è un'opzione. L'unica opzione è far funzionare questo. Penso che se avessi un modo per far aspettare il codice client senza bloccare, il mio problema sarebbe risolto.

Answer 1

Non esiste alcuna funzionalità come attesa o sospensione in javascript, poiché impedisce al browser di rispondere.

Nel tuo caso vorrei andare con qualcosa di simile a seguente:

function wait(){ 
    if (!condition){ 
    setTimeout(wait,100); 
    } else { 
    // CODE GOES IN HERE 
    } 
} 

Answer 2

E 'facile fare un errore quando si chiama setTimeout che farà sì che lo stack delle chiamate JavaScript a riempirsi. Se la funzione ha parametri, è necessario passare quelli alla fine della lista setTimeout parametri in questo modo:

function wait(param1, param2){ 
    if (!condition){ 
    setTimeout(wait, 100, param1, param2); 
    } else { 
    // CODE GOES IN HERE 
    } 
} 

Se si passa parametri o anche includere vuota() dopo il nome della funzione, sarà eseguito immediatamente e riempire lo stack.

// This is the wrong way to do it!  
function wait(param1, param2){ 
    if (!condition){ 
    setTimeout(wait(param1, param2), 100); // you'll get max call stack error if you do this! 
    } else { 
    // CODE GOES IN HERE 
    } 
} 

Answer 3

Questa funzione chiama condFunc che deve restituire true quando viene soddisfatta la condizione. Quando ciò accade, viene chiamato readyFunc. checkInterval imposta tasso di check-in millisecondi

 var wait = function(condFunc, readyFunc, checkInterval) { 
      var checkFunc = function() { 
       if(condFunc()) { 
        readyFunc(); 
       } 
       else 
       { 
        setTimeout(checkFunc, checkInterval); 
       } 
      }; 
      checkFunc(); 
     }; 

Usage:

 wait(
      function() { return new Date().getSeconds() == 10; }, 
      function() { console.log("Done"); }, 
      100 
     ); 

stampe "Done" quando il tempo attuale è di 10 secondi dopo minuto

Answer 4

avevo bisogno di rallentare un processo e si avvicinò con un utile piccolo metodo.

let wait = (seconds) => 
    new Promise(resolve => 
     setTimeout(() => resolve(), seconds * 1000) 
    ); 

E puoi usarlo in questo modo.

(async() => { 
    await wait(3); //wait 3 seconds 
    let result = await doWork(); 
})