Sequential calls within a for loop about frame.js HOT 6 CLOSED

you found the right place! and I do have a few ideas, but if you have a code sample it would be a lot easier to point you in the right direction.

from frame.js.

Thanks Bishop! It’s kind a hairy chuck of code but here is a trimmed down version so you can see what I am doing. I have not included the actual functions, let me know if you need them to carify.

The issue is that the three calls within the for loop are performed out of sequence. The code marked ‘//update status’ and ‘//update progress bar’ are performed for ALL records, then the code marked ‘//get remote file’ (which is the ajax all.

function do_import() {

            Frame.useTimeout = false;



            //reset status 

            Frame(function(){

                            reset_status();

            });

            //debug mode

            Frame(100, function(){

                            debug_mode();

            });

            //silent mode

            Frame(100, function(){

                            silent_mode();

            });



            . . . 



            Frame(100, function(){

                            if (link_count) { 

                                            for (var i=0;i<link_count;i++) {

                                                            //update status

Frame(function(){

                                                                            if (!silent) { $('#file_status').append("Getting remote file #"+i+"<br />"); }

                                                                            Frame();

                                                            });

                                                            //get remote file

                                                            Frame(function(){

                                                                            get_remote(i);

                                                                            Frame();

                                                            });

                                                            Frame(function(){

                                                                            //update progress bar

                                                                            p=i+1;

                                                                            $('#queue_count').val(Frame.count());

                                                                            $('#masterprogressbar').progressbar({ value: i });

                                                                            $('#masterprogressbar').html( p+' of '+ link_count );

                                                                            Frame();

                                                            });

                                                            Frame();



                                            } //end of for loop



                            } else {

                                            Frame(function(){

                                                            count_error();

                                                            Frame();

                                            });

                            }



                            Frame();

            });



            //complete

            Frame(100, function(){

                            //Frame.report();

                            import_complete();

            });

            Frame.init();  

}

I greatly appreciate your prompt response.

Thanks!

Chris

From: Bishop Zareh [mailto:[email protected]]
Sent: Wednesday, January 02, 2013 3:55 PM
To: bishopZ/Frame.js
Cc: cboydNYC
Subject: Re: [Frame.js] Sequential calls within a for loop (#42)

you found the right place! and I do have a few ideas, but if you have a code sample it would be a lot easier to point you in the right direction.

—
Reply to this email directly or view it on GitHub #42 (comment) .

https://github.com/notifications/beacon/Jshd8sI44GVrKZBvymxqKFs9rPDjPFn3E2uJyyFis_avMZtTP85QhO94O_RxCSxp.gif

from frame.js.

Cool, thanks for posting. It's great to see people using the library. This is a problem that I ran into a bunch of times. Frame is operating properly, but it can be confusing when working through it the first time.

The quick answer is, we've added Frame.bump to aid in just this situation. You should be able to solve the problem by changing the last Frame to:

Frame.bump(100, function(){
    import_complete();
});

The longer explanation is that you are adding new Frames inside of an existing Frame. The Frames added by the for loop are not added until after the import_complete() Frame has been added, thus the import_complete() will run before the Frames added by the for loop. I'm guessing from your comments that you figured that much out.

Frame.bump adds a Frame that adds a Frame, effectively bumping the import_complete() after any Frames that had been added in the meantime. Another way to do this is to reorganize the order the Frames are added just a bit:

 Frame(function(next){
     for( var i ...){
         Frame(function(next){
             get_remote(i);
             next();
         });
     }
     Frame(function(next){
         import_complete();
         next();
     });
     next();    
 });

Best Luck!

from frame.js.

Thanks for your response Bishop!

That solves half my problem. The bump now prevents the function AFTER the loop from executing before the loop is complete. I still have the issue that the functions INSIDE the for loop are not executed in sequence: For example:

                                            for (var i=0;i<link_count;i++) {

                                                            Frame(function(){

                                                                            $('#file_status').append("start"); 

                                                                            Frame();

                                                            });

                                                            //get remote file

                                                            Frame(function(){

                                                                            get_remote(i); //ajax call

                                                                            Frame();

                                                            });

                                                            Frame(function(){

                                                                            //update progress bar

                                                                            $('#file_status').append("done");

                                                                            Frame();

                                                            });

                                                            Frame();



                                            } //end of for loop

The first and last frames within the loop do some user feedback, but the second frame is an ajax call. Currently the first and third frames are executed without waiting for the ajax call to complete. So I get “start” and “done” for all 400 iterations of my loop, then it starts with #1 and performs all of the ajax calls.

Any more words of wisdom?

Thanks,

Chris

From: Bishop Zareh [mailto:[email protected]]
Sent: Thursday, January 03, 2013 3:16 PM
To: bishopZ/Frame.js
Cc: cboydNYC
Subject: Re: [Frame.js] Sequential calls within a for loop (#42)

Cool, thanks for posting. It's great to see people using the library. This is a problem that I ran into a bunch of times. Frame is operating properly, but it can be confusing when working through it the first time.

The quick answer is, we've added Frame.bump to aid in just this situation. You should be able to solve the problem by changing the last Frame to:

Frame.bump(100, function(){
import_complete();
});

The longer explanation is that you are adding new Frames inside of an existing Frame. The Frames added by the for loop are not added until after the import_complete() Frame has been added, thus the import_complete() will run before the Frames added by the for loop. I'm guessing from your comments that you figured that much out.

Frame.bump adds a Frame that adds a Frame, effectively bumping the import_complete() after any Frames that had been added in the meantime. Another way to do this is to reorganize the order the Frames are added just a bit:

Frame(function(next){
for( var i ...){
Frame(function(next){
get_remote(i);
next();
});
Frame(function(next){
import_complete();
next();
});
}
next();

});

Best Luck!

—
Reply to this email directly or view it on GitHub #42 (comment) .

Image removed by sender.

from frame.js.

Easy enough to resolve. Checkout the AJAX example in the readme. Frame is a promise architecture. So every Frame makes a promise and calling Frame() at the end "keeps" or completes the promise. So to prevent Frame from progressing until the AJAX has completed, you need to wait to call Frame() until the AJAX call completes. So, instead of:

Frame(function(){
     get_remote(i); //ajax call
     Frame();
});

do:

Frame(function(){
     get_remote(i, Frame); //ajax call
});
function get_remote(i, callback) {
    $.ajax({
        complete: function(){
            callback(); // completes the Frame
        }
    })
}

from frame.js.

Thanks, Bishop!

I also realized my other issue is that I had failed to set asyn: false on my ajax request.

Thanks!

Chris

From: Bishop Zareh [mailto:[email protected]]
Sent: Saturday, January 05, 2013 4:45 PM
To: bishopZ/Frame.js
Cc: cboydNYC
Subject: Re: [Frame.js] Sequential calls within a for loop (#42)

Easy enough to resolve. Checkout the AJAX example in the readme. Frame is a promise architecture. So every Frame makes a promise and calling Frame() at the end "keeps" or completes the promise. So to prevent Frame from progressing until the AJAX has completed, you need to wait to call Frame() until the AJAX call completes. So, instead of:

Frame(function(){
get_remote(i); //ajax call
Frame();
});

do:

Frame(function(){
get_remote(i, Frame); //ajax call
});
function get_remote(i, callback) {
$.ajax({
complete: function(){
callback();
}
})
}

—
Reply to this email directly or view it on GitHub #42 (comment) .

Image removed by sender.

from frame.js.