CODEWITHSUNDEEP
javascriptc#jquery
Nerd in Training
Nerd in Training

Reputation: 2230

Javascript code optimization for Find()

I have c# code that runs a query in SQL and returns roughly 2000 rows. Then a Treeview control is created and added the my main page. 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;
            }
        });

So it takes about 10-15 minutes to hit the clearInterval(i). When it does, i = 978. Not sure why it would take so long. Possibly the find() is really slow. Does anyone recommend an alternative?

EDIT

Version of Internet Explorer

Upvotes: 6

Views: 111

Answers (2)

Alex Kirko
Alex Kirko

Reputation: 466

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

Let's look at what your code seems to do.

  1. Query the backend, pull the data needed to build the treeview. This is done fast.
  2. Build the tree asynchronyously.
  3. While the tree is building, keep checking it with find() to see whether it is ready.

A couple problems.

  1. All DOM queries are rather slow compared to non-DOM data manipulation. So yes, find() isn't the fastest function as it it searches the entire DOM starting with the parent object you specify and returns the objects it finds.
  2. If you run setInterval with just one argument like you do:

Code:

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

...I think it executes every millisecond. I've tested 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 finished almost instantly.

So I'm guessing it is going so slow because the program is firing a costly DOM search hundreds of times per second. The solutions are:

  1. Provide the function that does whatever you need at the end of tree building as a callback to the asynchronous building function. This way you eliminate the need to check.
  2. Try to supply a time interval to setInterval and see if it solves your issue by freeing up the program to build the tree instead of repeated checks:

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 better practice but supplying the time interval will probably work too.

Upvotes: 2

guest271314
guest271314

Reputation: 1

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

Upvotes: 1

Related Questions