(...)
Isso chama-se loop síncrono e já que o JavaScript não é por natureza multitarefa, temos que recorrer a algum artifício no qual permita o código deixar a CPU "respirar"!
Há várias formas de se obter esse efeito assíncrono, abaixo eu listo alguns dos melhores:
Ass Loop 01:
- Código:
console.clear();
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 100);
})(i);
}
Ass Loop 02:
- Código:
console.clear();
function logItem(item) {
console.log(item);
}
function asyncEach2(arr, callback) {
// Utility inner function to create a wrapper function for the callback
function makeCallbackWrapper(arr, i, callback) {
// Create our function scope for use inside the loop
return function() {
callback(arr[i]);
}
}
for (var i = 0; i < arr.length; ++i) {
setTimeout(makeCallbackWrapper(arr, i, callback), 0);
}
}
console.log("begin");
asyncEach2([1, 2, 3], logItem);
console.log("end");
Ass Loop 03:
- Código:
console.clear();
function logItem(item) {
console.log(item);
}
function asyncEach3(arr, callback) {
for (var i = 0; i < arr.length; ++i) {
// boundCallback is a new function which has arr[i] permanently
// set (partially applied) as its first argument. The "null" argument
// is the binding for the `this` context variable in the callback, which
// we don't care about in this example...
var boundCallback = callback.bind(null, arr[i]);
setTimeout(boundCallback, 0);
}
}
console.log("begin");
asyncEach3([1, 2, 3], logItem);
console.log("end");
O primeiro modelo deve-se ser evitado, até onde eu sei é que não sei por qual razão, quem souber avisa ai ok?
Executem cada um no console e vejam o resultado!
JS