JavaScript code optimization for Find ()

Question

I have C # code that runs a query in SQL and returns approximately 2,000 rows. Then a Treeview control is created and my main page is added. This is done almost instantly, which is good.

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

Thus, it takes about 10-15 minutes to reach clearInterval(i) . When this happens, i = 978 . I don’t know why it will take so long. Perhaps find() is very slow. Does anyone recommend an alternative?

EDIT

Answer 1

The problem is probably that you are calling setInterval without the second argument (time interval)

See what your code does.

• Request a backend, pull out the data necessary to create a tree structure. This is done quickly.
• Create the tree asynchronously.
• While the tree is building, continue to test it with find () to see if it is ready.

A couple of problems.

• All DOM queries are pretty slow compared to manipulating data other than the DOM. So yes, find () is not the fastest function, since it searches the entire DOM, starting from the specified parent, and returns the found objects.
• If you run setInterval with just one argument, like you:

code:

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

... I think it executes every millisecond. I checked this with this code:

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

... and it ended almost instantly.

So, I guess this happens so slowly because the program runs an expensive DOM search hundreds of times per second. Solutions:

• Provide a function that does everything you need at the end of the tree build as a callback to the asynchronous build function. Thus, you eliminate the need for verification.
• Try specifying a time interval for setInterval and see if it solves your problem by freeing up the tree-building program instead of re-checking:

code:

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

A callback would be more practical, but a time slot might also work.

Answer 2

Try using the .one() , DOMNodeInserted event, delegating the event to 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>