Come lasciare javascript "breath"

Question

Ho qualche codice javascript/jquery (per un sito Web interno) che esegue molta elaborazione lato client su un grande tavolo. Funziona un po 'lentamente, ma va bene.

Il problema è che congela il browser mentre esegue i cicli che deve eseguire. Questo ha due effetti non desiderati:

1. La filatrice elaborazione (un GIF animato, ma anche provato spin.js e che ha lo stesso problema) congela.
2. Se ci sono abbastanza righe della tabella, i loop impiegano molto tempo e il browser riporta uno script che non risponde

C'è un modo per avere una sorta di una dichiarazione "respiro" nel codice, tale che ogni (diciamo) 100 iterazioni, si interrompe per far girare lo spinner e il browser sappia che lo script sta ancora lavorando su di esso? Qualcosa di simile (pseudo codice):

for (i=0;i<20000;i++) 
{ 
    fnProcessRow(); 
    if (i % 100 == 0) breath(); 
} 

Answer 1

Un modo per rompere il vostro javascript è quello di dividere la trasformazione in blocchi e usare setTimeout() per eseguire il prossimo "chunk"

Fatemi sapere se avete bisogno un codice per mostrarti cosa intendo.

Answer 2

Non esiste un metodo impostato per farlo poiché dipende in modo specifico dal codice. Qualcosa di simile potrebbe funzionare:

fnProcessRows(0, 10000); 

function fnProcessRows(start, end) { 
    /* do row processing */ 

    if (end < totalRows) { 
     setTimeout(function() { 
      fnProcessRows(start + 10000, end + 10000); 
     }, 1000); 
    } 
}); 

Questa elaborerà 10000 righe con un secondo di pausa in mezzo. Questo può avere effetti collaterali potenzialmente strani come la visualizzazione delle righe "elaborate" con righe "non elaborate", che possono essere indesiderabili. Se non lo è, allora questa dovrebbe essere una soluzione piuttosto semplice da aiutare.

Ovviamente è possibile ridurre 10000 a qualcos'altro se è non risponde, è non risponde; dovrebbe non rispondere per periodi di tempo molto brevi che l'utente avrebbe difficoltà a notare.

Answer 3

Vedere this question.

Se non si vuole andare via setTimeout/setInterval, prova ad aggiungere:

if (i % 100) { $("selector for your animated image").width(); } 

Su alcuni (la maggior parte?) I browser che lo spingono a ri-layout e rendering.