historia - que es javascript pdf
Dormir en JavaScript: demora entre las acciones (6)
Actualización 2018
Los últimos Safari, Firefox y Node.js ahora también admiten async / await / promises.
Actualización 2017
JavaScript ha evolucionado desde que se hizo esta pregunta y ahora tiene funciones de generador, y se está implementando el nuevo async / await / Promise. A continuación hay dos soluciones, una con función de generador que funcionará en todos los navegadores modernos, y otra, utilizando la nueva función async / await que todavía no se admite en todas partes.
Usando una función de generador:
''use strict'';
let myAsync = (g) => (...args) => {
let f, res = () => f.next(),
sleep = (ms) => setTimeout(res, ms);
f = g.apply({sleep}, args); f.next();
};
let myAsyncFunc = myAsync(function*() {
let {sleep} = this;
console.log("Sleeping");
yield sleep(3000);
console.log("Done");
});
myAsyncFunc();
Usando async / await / Promises:
(A partir del 1/2017, compatible con Chrome, pero no con Safari, Internet Explorer, Firefox, Node.js)
''use strict'';
function sleep(ms) {
return new Promise(res => setTimeout(res, ms));
}
let myAsyncFunc = async function() {
console.log(''Sleeping'');
await sleep(3000);
console.log(''Done'');
}
myAsyncFunc();
Preste atención al hecho de que estas dos soluciones son de naturaleza asíncrona. Esto significa que myAsyncFunc (en ambos casos) volverá mientras duerme.
Es importante tener en cuenta que esta pregunta es diferente de ¿Cuál es la versión de JavaScript de sleep ()? donde el solicitante está pidiendo un sueño real (no hay otra ejecución de código en el proceso) en lugar de un retraso entre las acciones.
¿Hay alguna manera de poder dormir en JavaScript antes de llevar a cabo otra acción?
Ejemplo:
var a = 1+3;
// Sleep 3 seconds before the next action here
var b = a + 4;
En caso de que realmente necesite un sleep() solo para probar algo. Pero ten en cuenta que bloqueará el navegador la mayor parte del tiempo mientras depura - probablemente sea por eso que lo necesitas de todos modos. En el modo de producción comentaré esta función.
function pauseBrowser(millis) {
var date = Date.now();
var curDate = null;
do {
curDate = Date.now();
} while (curDate-date < millis);
}
No utilice una new Date() en el bucle, a menos que desee perder memoria, potencia de procesamiento, batería y posiblemente la vida útil de su dispositivo.
Hay varias formas de resolver este problema. Si usamos la función setTimeout , vamos a conocerlo primero. Esta función tiene tres parámetros: function o code , delay (en milisegundos) y los parameters . Dado que se requiere el parámetro de función o código , los otros son opcionales. Una vez que no haya ingresado el retraso , se establecerá en cero.
Para obtener más detalles sobre setTimeout() vaya a este enlace .
Versión simplificada:
var a = 1 + 3;
var b;
console.log(''a = '' + a);
setTimeout(function(){
b = a + 4;
console.log(''b = '' + b);
}, 1000);
salida:
a = 4
24 -> Identificador de número de la lista de tiempos de espera activos
b = 8
Usando el parámetro pass:
var a = 1 + 3;
var b;
console.log(''a = '' + a);
setTimeout(myFunction, 1000, a);
function myFunction(a)
{
var b = a + 4;
console.log(''b = '' + b);
}
salida:
a = 4
25 -> Identificador de número de la lista de tiempos de espera activos
b = 8
Soporte del navegador:
Chrome Firefox Edge Safari Opera 1.0 1.0 4.0 1.0 4.0
Puede usar setTimeout para lograr un efecto similar:
var a = 1 + 3;
var b;
setTimeout(function() {
b = a + 4;
}, (3 * 1000));
Esto realmente no ''inactiva'' el JavaScript; simplemente ejecuta la función pasada a setTimeout después de una cierta duración (especificada en milisegundos). Aunque es posible escribir una función de suspensión para JavaScript, lo mejor es usar setTimeout si es posible, ya que no congela todo durante el período de suspensión.
Si desea funciones menos torpes que setTimeout y setInterval , puede envolverlas en funciones que simplemente invierten el orden de los argumentos y darles buenos nombres:
function after(ms, fn){ setTimeout(fn, ms); }
function every(ms, fn){ setInterval(fn, ms); }
Versiones de CoffeeScript:
after = (ms, fn)-> setTimeout fn, ms
every = (ms, fn)-> setInterval fn, ms
A continuación, puede utilizarlos muy bien con funciones anónimas:
after(1000, function(){
console.log("it''s been a second");
after(1000, function(){
console.log("it''s been another second");
});
});
Ahora se lee fácilmente como "después de N milisegundos, ..." (o "cada N milisegundos, ...")
Versión ECMAScript 6, utilizando generadores con rendimiento para "bloqueo de código":
Debido a que la pregunta original se publicó hace siete años, no me molesté en responder con el código exacto, porque es demasiado fácil y ya se ha respondido. Esto debería ayudar en problemas más complicados, como si necesita al menos dos carencias, o si planea secuenciar la ejecución asincrónica. Siéntete libre de modificarlo para que se ajuste a tus necesidades.
let sleeptime = 100
function* clock()
{
let i = 0
while( i <= 10000 )
{
i++
console.log(i); // actually, just do stuff you wanna do.
setTimeout(
()=>
{
clk.next()
}
, sleeptime
)
yield
}
}
let clk = clock()
clk.next()
También puede encadenar eventos a través de Promises :
function sleep(ms)
{
return(
new Promise(function(resolve, reject)
{
setTimeout(function() { resolve(); }, ms);
})
);
}
sleep(1000).then(function()
{
console.log(''1'')
sleep(1000).then(function()
{
console.log(''2'')
})
})
O mucho más simple y menos elegante sería
function sleep(ms, f)
{
return(
setTimeout(f, ms)
)
}
sleep(500, function()
{
console.log(''1'')
sleep(500, function()
{
console.log(''2'')
})
})
console.log(''Event chain launched'')
Si solo estás esperando que ocurra alguna condición, puedes esperar así
function waitTill(condition, thenDo)
{
if (eval(condition))
{
thenDo()
return
}
setTimeout(
() =>
{
waitTill(condition, thenDo)
}
,
1
)
}
x=0
waitTill(
''x>2 || x==1''
,
() =>
{
console.log("Conditions met!")
}
)
// Simulating the change
setTimeout(
() =>
{
x = 1
}
,
1000
)