var funcs = []; // let's create 3 functions for (var i = 0; i < 3; i++) { // and store them in funcs funcs[i] = function() { // each should log its value. console.log("My value: " + i); }; } for (var j = 0; j < 3; j++) { // and now let's run each one to see funcs[j](); }
Sale esto:
Mi valor: 3
Mi valor: 3
Mi valor: 3
Mientras que me gustaría que saliera:
Mi valor: 0
Mi valor: 1
Mi valor: 2
El mismo problema ocurre cuando el retraso en la ejecución de la función se debe al uso de detectores de eventos:
var buttons = document.getElementsByTagName("button"); // let's create 3 functions for (var i = 0; i < buttons.length; i++) { // as event listeners buttons[i].addEventListener("click", function() { // each should log its value. console.log("My value: " + i); }); }
<button>0</button> <br /> <button>1</button> <br /> <button>2</button>
… o código asíncrono, por ejemplo, usando Promesas:
// Some async wait function const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms)); for (var i = 0; i < 3; i++) { // Log `i` as soon as each promise resolves. wait(i * 100).then(() => console.log(i)); }
También es evidente en bucles for in
y :for of
const arr = [1,2,3]; const fns = []; for(var i in arr){ fns.push(() => console.log(`index: ${i}`)); } for(var v of arr){ fns.push(() => console.log(`value: ${v}`)); } for(var f of fns){ f(); }
¿Cuál es la solución a este problema básico?