setTimeout for incremental page load

Question

Please see the code below:

function GetSQLTable() {
        var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
        var res = str.split(",");
        $("#LoadingImage").show();
        $("#LoadingImage2").show();

        for (var i = 0; i < res.length; i++) {
                alert(res[i])
                (function(i,res) {
                    setTimeout(function (i,res) {
                        alert(res[i])
                        GetSQLTable2(i, res.length,res)
                    }, 0)
                })(i,res)
            }
    }

The first alert displays the correct information. The second alter errors (undefined). Why is this?

Also, I am informed that this approach should stop the webpage crashing when there are lots of AJAX requests (it is an incremental page load). However, I do not understand how setting a timeout of zero seconds between AJAX requests will help. GetSQLTable2 executes an AJAX call.

fieldGroupReferences can contain up to about 50 values.

In $("#<%=fieldGroupReferences.ClientID%>")[0] an id is never an array so there is no need for [0] i.e. $("#<%=fieldGroupReferences.ClientID%>") should be fine!!! — wallop, Sep 25 '14 at 11:29
there is no ; after setTimeout, alert, GETSQLTable and the anonymous function call as well — wallop, Sep 25 '14 at 11:31
I disagree with "webpage crashing when there are lots of AJAX requests" see my AJAX tester [here](http://stackoverflow.com/a/5642478/443685) — Saic Siquot, Sep 25 '14 at 11:38
@Wishy JQuery will return an array for the id, so there is a need for [0] to access the value of one of the elements. Also `;` are not required in javascript, but they would indeed improve readability, especially when there's anonymous functions. — James, Sep 25 '14 at 11:51
Ah right. It does not make sense since ID is always for ONE element. About ; yes i know but its always good to enforce them. — wallop, Sep 27 '14 at 09:04

wallop · Accepted Answer · 2014-09-25T11:42:48.283

This jsbin link should answer your question JSBIN

When you call

setTimeout(function(res,i){
//using res and i here
},0)

dont use res,i as function parameters,by logic of closure res and i are by default available inside the function. If you use res,i then you are creating a function with new parameters for which values are not being sent to. So it should just be

 setTimeout(function(){
    //using res and i here
    },0)

I believe when you call setTimeout(function(){},0) the format of setTimeout is something like this,

function setTimeout(callback,time){
   after-time{
      callback(); //observe here we are not passing anything as arguements, i am not sure but setTimeout may pass its own values like how $.on passes 'events' to callbacks
   }    
}

To answer your second part as to how setting 0 seconds will help, by setting 0 seconds, to say in laymans terms you are continuing the flow in an asynchronous manner!!! Hence no matter how many ajax responses are recieved they wont block each other since the code is asynchronously solved

setTimeout for incremental page load

1 Answers1