Javascript - problema de cierre de setTimeout

Question

Estoy luchando con el siguiente código. He intentado muchas formas diferentes de hacerlo, pero termino con uno de los dos resultados incorrectos.

for(i = 0; i < result.length; i++) { 

    var tmpBlockInfo = { 
     size: worldTest.data[0].size, 
     xStartPixel : result[i].x * worldTest.data[0].size, 
     yStartPixel : result[i].y * worldTest.data[0].size, 
     blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
    } 

    var tmpFunc = function(){ 
     worldTest.fillBlock(tmpBlockInfo, 157, 152, 124, 255) 
    }; 

    var t = setTimeout(function(){ 
     tmpFunc() 
    } , 500 * i); 
} 

El problema con el código anterior es tmpBlockInfo siempre recibe el último resultado [i] .x/resultado [i] .y. Así que estoy esperando cuando el tiempo de espera ejecuta la función es ver qué resultado [i] .x/result [i] .y se dejó después del bucle (en lugar de pasarlo como una "nueva" variable)

I Pensar en ponerlo en una función solucionaría el problema del cierre, pero no hay suerte.

También probamos:

for(i = 0; i < result.length; i++) { 

    var tmpBlockInfo = { 
     size: worldTest.data[0].size, 
     xStartPixel : result[i].x * worldTest.data[0].size, 
     yStartPixel : result[i].y * worldTest.data[0].size, 
     blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
    } 

    var t = setTimeout(function(){ 
     worldTest.fillBlock(tmpBlockInfo, 157, 152, 124, 255) 
    } , 10000 * i); 
} 

Con los mismos resultados que el primer código.

Si hago:

for(i=0; i < result.length; i++) { 

    var tmpBlockInfo = { 
     size: worldTest.data[0].size, 
     xStartPixel : result[i].x * worldTest.data[0].size, 
     yStartPixel : result[i].y * worldTest.data[0].size, 
     blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
    } 

    setTimeout(function(passBlockInfo) { 
     worldTest.fillBlock(tmpBlockInfo, 157, 152, 124, 255) 
    } (tmpBlockInfo), 1000 * i); 
} 

lo hace procesar todas las funciones fillBlock correctamente. PERO los hace todos al mismo tiempo (por ejemplo, no los dispara uno a la vez. Simplemente los hace uno tras otro pero provoca el bloqueo (sin actualización de la pantalla) y sin demora entre cada uno.

Ayuda con esto sería genial!

Answer 1

la razón es que ellos se está ejecutando de inmediato se debe a que se está ejecutando la función de la llamada setTimeout. lo que me gustaría hacer es crear otra función como tal

function MakeTimeoutCall(fn, data, timeout){ 
    setTimeout(function() {fn.call(null, data);}, timeout); 
} 

Luego, en su bucle donde llama a setTimeout, haga esto

MakeTimeoutCall(
    function(passBlockInfo){ 
     worldTest.fillBlock(passBlockInfo, 157, 152, 124, 255); 
    }, 
    tmpBlockInfo, 
    1000 * i); 

(Asumiendo que worldTest es un objeto global).

Eso debería funcionar. setTimeout espera que una función llame al final del tiempo de espera, le está dando su función, pero la llama de inmediato. El valor de retorno, en este caso nulo, se otorga al tiempo de espera. Entonces no hay tiempo de espera, todo sucede a la vez.

Por si acaso mi respuesta es un poco complicada dado el contexto, here es un enlace a una solución más simple en jsfiddle.

Answer 2

Prueba esto:

for(i = 0; i < result.length; i++) { 
    var tmpBlockInfo = { 
     size: worldTest.data[0].size, 
     xStartPixel : result[i].x * worldTest.data[0].size, 
     yStartPixel : result[i].y * worldTest.data[0].size, 
     blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
    } 
    var t = setTimeout(createFillBlockFn(tmpBlockInfo) , 500 * i); 
} 

function createFillBlockFn(blockInfo) { 
    return function() { 
     worldTest.fillBlock(blockInfo, 157, 152, 124, 255) 
    } 
} 

Answer 3

se necesita una función de envoltura para retener alcance. Esta es solo una de las pocas maneras de hacerlo.

for(i=0; i < result.length; i++) { 

    setTimeout(function() { 

     var tmpBlockInfo = { 
      size: worldTest.data[0].size, 
      xStartPixel : result[i].x * worldTest.data[0].size, 
      yStartPixel : result[i].y * worldTest.data[0].size, 
      blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
     }; 

     return function() { 
      worldTest.fillBlock(tmpBlockInfo, 157, 152, 124, 255); 
     }; 
    }(), 1000 * i); 
} 

Answer 4

Este código le ayudará a:

for(i=0; i < result.length; i++) 
{ 
    setTimeout(function(){ 
     { 
      size: worldTest.data[0].size, 
      xStartPixel : result[i].x * worldTest.data[0].size, 
      yStartPixel : result[i].y * worldTest.data[0].size, 
      blockType : (Math.random() * 100 > 10) ? 'path' : 'wall' 
     }, 157, 152, 124, 255); 
    } , 500 * i); 
} 

Las variables se declaran en la parte superior de la función, por lo que tiene una var tmpBlockInfo, ONT tmpFunc, y aquellas variables que reasignar.