viernes, 5 de junio de 2015

JavaScript. Función sleep

Una función que puede resultar muy útil en muchas ocasiones es una que bloquee el proceso actual durante un intervalo determinado de tiempo.

Así como otros lenguajes pueden implementar un método Sleep que realiza esta función, en JavaScript no tenemos nada parecido. Sí que podemos, a través de un timeout, especificar que un proceso determinado se ejecute al cabo de un intervalo de tiempo, pero esto no bloquea la ejecución del resto del código.

Aunque a primera vista pueda parecer que una función que no haga nada, salvo ralentizar la ejecución del código, no tiene mucha utilidad, resulta muy útil en fases de pruebas y depuración (por ejemplo para simular accesos a información de servidor, o para simular el comportamiento de nuestras páginas en dispositivos escasos de recursos).

Aquí tenemos un ejemplo de cómo podemos implementar nuestra propia función sleep.

function sleep(milliseconds) {
 var start = new Date().getTime();
 for (var i = 0; i < 1e7; i++) {
  if ((new Date().getTime() - start) > milliseconds) {
   break;
  }
 }
}

De esta forma para introducir, por ejemplo, un retardo de un segundo en cualquier sitio de nuestro código bastaría con hacer:

 sleep(1000);


4 comentarios:

  1. Nota, entiendo segun los comentarios de tu post, debo sustituir (milliseconds) * 1000 en todo el codigo,,, es decir.....function sleep(1000) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > 1000) {
    break;
    }
    }
    }

    El valor 1000 es un ejemplo dado.... Gracias por tu confimacion

    ResponderEliminar
    Respuestas
    1. Hola Alfredo.
      No, la función quedaría tal y como está. Lo único que habría que cambiar es el número de milisegundos al llamar a la función. Es decir, donde quieras que se ejecute este retardo deberás llamar a la función con el número de milisegundos de espera que deseas:
      sleep(1000); // Para un segundo
      sleep(2000); // Para dos segundos
      sleep(500); // Para medio segundo
      ....

      Eliminar
    2. perdona pero creo que esta función no detiene el código, lo que hace es ejecutar código (vacío) en un bucle por un tiempo determinado.
      Esta función debería llamarse 'frozen' porque congela el motor de javascript y el entorno del navegador, imposibilitando realizar nada más hasta salir de ella.
      ... y sinó, pásale 20000 msg y prueba a pulsar algún botón del entorno mientras se ejecuta.

      Eliminar
    3. Es la idea. De hecho en la primera frase del post indico que el objetivo es "crear una función que bloquee el proceso". Para hacer una ejecución asíncrona después de un intervalo de tiempo ya tienes el método setTimeout que te permite esperar un tiempo determinado sin bloquear el hilo (como comento en el post).

      Eliminar