For example we've this code:
$.each([1, 2, 3], function(key, val) {
gear(val);
});
function gear(params) {
var values = {1: 'abc', 2: 'cba', 3: 'acb'};
query(values[params]);
}
function query(settings) {
$.ajax({
...
settings
...
})
}
How can i wait until every iteration will completed and call something yet?
You can use .reduce() to iterate the array and jQuery ajax promises to sequence the function calls:
[1, 2, 3].reduce(function(p, item) {
return p.then(function() {
return gear(item);
});
}, $.Deferred().resolve()).then(function() {
// everything done here
});
function gear(params) {
var values = {1: 'abc', 2: 'cba', 3: 'acb'};
return query(values[params]);
}
function query(settings) {
return $.ajax({
...
settings
...
})
}
This will sequence the ajax calls so the next one doesn't start until the prior one is done.
In both gear() and query(), you return the promise that $.ajax() already returns.
Then, you use .reduce() to iterate the array where you accumulate a promise. You pass in an initially resolved promise and then each item from the array adds a .then() onto the end of the chain.
If you wanted to run all the Ajax calls at the same time and then just get a notification when they are all done, you could do this:
$.when.apply($, [1, 2, 3].map(function(item) {
return gear(item);
})).then(function(r1, r2, r3) {
// everything done here
// results are in arguments[0], arguments[1], ... arguments[n]
});
function gear(params) {
var values = {1: 'abc', 2: 'cba', 3: 'acb'};
return query(values[params]);
}
function query(settings) {
return $.ajax({
...
settings
...
})
}
.then() is the ES6 promise standard. jQuery already supports it, so I use the standard rather than the jQuery proprietary methods. Deferreds/Promises are THE method to manage and coordinate multiple async operations. May as well start learning them now.
var deferreds = [];
$.each([1, 2, 3], function(key, val) {
gear(val);
});
function gear(params) {
var values = {1: 'abc', 2: 'cba', 3: 'acb'};
query(values[params]);
}
function query(settings) {
deferreds.push($.ajax({
...
settings
...
}));
}
$.when.apply($, deferreds).done(function(){
// do something here
});
Below is an example of achieving it.
function iterate(callback) {
$.each([1, 2, 3], function(key, val) {
gear(val);
});
callback();
}
function gear(params) {
var values = {
1: 'abc',
2: 'cba',
3: 'acb'
};
print(values[params]);
}
function print(str) {
document.write(str + "<br />")
}
function notifyComplete(){
print("Completed.")
}
iterate(notifyComplete);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$.eachin a function and pass a callback function to it and call it once each is over