Ottimizzazione del codice Javascript per Find()

Question

Ho codice C# che esegue una query in SQL e restituisce circa 2000 righe. Quindi viene creato un controllo Treeview e aggiunta la mia pagina principale. Questo viene fatto quasi istantaneamente, il che è positivo.

var orgId = $('select[name="ctl00$PageContent$FunctionsDropDownList"] option:selected').val(); 
     if (!orgId) { 
      return false; 
     } 
     //calls serverside get data 
     //This line happens quickly 
     $('#ctl00_PageContent_HiddenRulesDialogTriggerButton').click(); 

     //This part takes about 10-15 minutes to finally get to the true 
     var i = setInterval(function() { 
      if ($('#ctl00_PageContent_treeview').find('table').length > 0) 
      { 
       clearInterval(i); 
       StartDialog(); 
       return false; 
      } 
     }); 

Quindi ci vogliono circa 10-15 minuti per colpire il clearInterval(i). Quando lo fa, i = 978. Non sono sicuro del perché ci sarebbe voluto così tanto tempo. Forse lo find() è veramente lento. Qualcuno consiglia un'alternativa?

EDIT

Answer 1

Provare a utilizzare .one(), DOMNodeInserted eventi, delegando evento da document.

function StartDialog(el) { 
 
    console.log(el) 
 
} 
 

 
$(document) 
 
.one("DOMNodeInserted" 
 
, "#ctl00_PageContent_treeview table" 
 
, function(e) { 
 
    StartDialog(this) 
 
}); 
 

 
$("#ctl00_PageContent_treeview").append("<table></table>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="ctl00_PageContent_treeview"></div>

Answer 2

Il problema è probabilmente il fatto che si sta chiamando setInterval senza il secondo argomento (intervallo di tempo)

Diamo un'occhiata a ciò che il codice sembra fare.

1. Interrogare il back-end, tirare i dati necessari per creare la vista ad albero. Questo è fatto velocemente.
2. Costruisci l'albero in modo asincrono.
3. Mentre l'albero è in costruzione, continua a controllarlo con find() per vedere se è pronto.

Un paio di problemi.

1. Tutte le query DOM sono piuttosto lente rispetto alla manipolazione di dati non DOM. Quindi sì, find() non è la funzione più veloce in quanto cerca nell'intero DOM a partire dall'oggetto padre specificato e restituisce gli oggetti che trova.
2. Se si esegue setInterval con un solo argomento, come si fa:

Codice:

var timer_id = setInterval(function() { 
    ...code here... 
}); 

... Penso che esegue ogni millisecondo. Ho provato questo con questo codice:

var k = 1; 
var i = setInterval(function() { 
    if (k < 100) 
    { 
     k += 1; 
    } else { 
     clearInterval(i); 
     window.alert('Finished!'); 
    } 
//No second argument 
}); 

... e ha finito quasi istantaneamente.

Quindi immagino che stia andando così lentamente perché il programma sta sparando una costosa ricerca DOM centinaia di volte al secondo. Le soluzioni sono:

1. Fornire la funzione che fa tutto ciò che è necessario alla fine della costruzione di un albero come richiamo alla funzione di costruzione asincrona. In questo modo si elimina la necessità di controllare.
2. Prova per la fornitura di un intervallo di tempo a setInterval e vedere se si risolve il problema liberando il programma per costruire l'albero invece di controlli ripetuti:

Codice:

var i = setInterval(function() { 
    if ($('#ctl00_PageContent_treeview').find('table').length > 0) 
    { 
     clearInterval(i); 
     StartDialog(); 
     return false; 
    } 
//Once per second 
},1000); 

A callback sarebbe essere una pratica migliore ma probabilmente anche l'intervallo di tempo richiesto.