每个循环完成后运行一个jquery函数

Question

I have a situation where i am running a jquery function and in that function i have an each loop. The each loop takes some time for processing and that is why the next statement executes before each completes. This creates a problem for me. I want a function to execute when each completes. My function is as follows:-

function myFunc() {
// Do something

$.each(mylist, function (i, val) {
    // do something
    filepicker.store(myList, function (stored_fpfile) {
                    console.log("Store successful:", JSON.stringify(stored_fpfile));
                }, function (FPError) {
                   // Error
                }, function (progress) {
                    console.log("Loading: " + progress + "%");
                }
                );
});

CallMyFunction();
}

Call my function executes before each loop finishes.

I dont want to use count of the list to detect and run my procedure. I want a reliable solution.

I am using the InkFilePicker API to store files to Amazon

Any help is appreciated.

Answer 1

I would suggest generating deferred objects for each iteration that are then stored in an array. Then, after the each, you can wait until all those deferred objects are complete to run your other function.

function myFunc() {
    // Do something
    var promiseArray = $.map(mylist, function (i, val) {
        return $.Deferred(function(def){
            // do something
            filepicker.store(val, function (stored_fpfile) {
                def.resolve(stored_fpfile);
            }, function (FPError) {
                def.reject(FPError);
            }, function (progress) {
                def.notify(progress); // won't actually be accurate
            });        
        }).promise();
    });
    $.when.apply($,promiseArray).done(function(){
        console.log(arguments); // array of results from onSuccess callbacks
        CallMyFunction();
    })

}

Answer 2

Apparently, the store is a wrapper around an AJAX object. You should test the progress and when it is completed call CallMyFunction, like so before the call to each:

items = myList.length;

And inside each:

...
function (progress) {
    console.log("Loading: " + progress + "%");
    if (--items === 0)
    {
        CallMyFunction();
    }
}
...

There aren't any counter arguments, performance is not impacted by this, you're sending data over the Internet which is the real bottleneck.

This is also reliable. In case of error you should decrement with --items too.