No se han encontrado widgets en la barra lateral
funciones Javascript – setInterval() clearInterval() setTimeout() – 2 2

Tras comprobar el éxito del post sobre las funciones javascript de setInterval(), clearInterval y setTimeout() y darme cuenta que este post lo he escrito y estaba en ingles, lo he querido traducir y reducirlo un poco para aclarar mas las diferencias.

Lectura recomendada:
10 Libros gratis de JavaScript

setInterval()

Este método es utilizado para ejecutar repetidamente una función en un intervalo establecido.
El formato de este método es:
[code lang=»js»] window.setInterval("functionName()",tiempo);[/code]

El primer parámetro («functionName()») es el nombre de la función que desea ejecutar.
Observa que el nombre de la función está entre comillas. Es tratado como una cadena para evitar que se ejecute de inmediato. El segundo parámetro (tiempo) es la cantidad de la demora en milisegundos, entre cada vez que la función se ejecuta (1 minuto = 60000 milisegundos).
Esto es útil en la animación, para la rotación de imágenes en una galería o tal vez refrescar la pantalla.

Por ejemplo, para volver a cargar una página después de un intervalo de 10 minutos (600.000 milisegundos), prueba este script:
[code lang=»js»]
function reFresh() {

location.reload(true)

}
window.setInterval("reFresh()",600000);
[/code]

clearInterval()

Este método se utiliza para detener el bucle cronometrado que se inició con el método setInterval () anterior.
El formato es:
[code lang=»js»]window.clearInterval(varName);[/code]
Con el fin de utilizarlo, el bucle debe ser asignado a una variable.

Volvamos a nuestro script actualiza la página anterior.
Sólo tenemos que añadir la palabra reservada var delante del bucle setInterval()

[code lang=»js»]
function reFresh()
{
window.open(location.reload(true))
}
var repeticion = window.setInterval("reFresh()",600000);
[/code]
Entonces podríamos crear un botón para detener la actualización de la página.
[code lang=»html»]
<form>
<input type="Button" value="Parar Refresco Página" onclick="window.clearInterval(repeticion);">
</form>
[/code]

setTimeout()

Este método se utiliza para ejecutar una función de JavaScript después de una determinada cantidad de tiempo. (El nombre es un poco engañoso. No se detiene el script para un período de tiempo, sino que espera un período de tiempo antes de empezar.)
A diferencia del método setInterval (), sólo se ejecuta una vez.
El formato es:
[code lang=»js»]window.setTimeout("functionName()",tiempo);[/code]

14 comentarios en «funciones Javascript – setInterval() clearInterval() setTimeout() – 2»
  1. Muy bueno el articulo. Pero existe alguna forma de poder usar el clearInterval() sin que el setInterval sea global. Porque lo he intentado y parece no funcionar si el setinterval se declaro en una funcion como varible local.

  2. Alguien me podria ayudar con jquery y javascript? tengo el problema de que al ejecutar un fragmento de código en el que consulto a php con el método $.post, despues recojo lo que el post me devuelve y segun el valor de lo que me traiga pinto un html u otro, y el problema parece ser que está en la rapidez con que se ejecuta el código porque si ejecuto paso a paso el código con el firebug si que se me genera el html que quiero, pero si lo ejecuto normal, no se genera. Un saludo.

    Este es el código

    var mchecks;
    function set_var(x){
    mchecks = x;
    }
    $.post(‘wdCalendar/consultachecks.php’,{cita: e.event[0]},
    function(data){
    mchecks=data;
    set_var(mchecks);
    });
    if(mchecks==’S,N’){
    icons.push(« «);
    } else if(mchecks==’S,S’){
    icons.push(« «);
    } else if(mchecks==’N,S’){
    icons.push(« «);
    } else if(mchecks==’N,N’) {
    icons.push(« «);
    }

  3. Buenas tengo un problema un codigo, tengo una ventana modal con nyroModal se presenta la ventana normal pero quiero que se cierre automanicamente a un tiempo transcurrido utlizo setTimeout pero no funciona, la ventana abre bien pero no se cierra.
    Este es el codigo:

    Nyro modal tester

    .hidden{ display: none; }

    $(function(){
    $(‘.nyroModal’).nyroModal();
    $(«.hidden»).click();
    //}); //primer codigo
    window.setTimeout(«.nyromodal.close()»,2000);
    });

  4. quiero detener un setTimeout a mitad digamos una persona abre una ventana y se reproduce un video cuando el temporizador se termine la ventana se cierra que pasa si la persona cierra la ventana antes de que termine el setTimeout que el temporizador sigue funcionando y si la persona vuelve a abrir la ventana el error es que la ventana se cerrara a los pocos minutos porque el setTimeout aun seguirira activo lo que quiero es detener el tiempo de setTimeout a mitad del proceso
    este es el ejemplo:
    $(‘#imagenvideo1’).click(function(){
    var v1 = setTimeout(function(){
    $(«#video1»).hide(0);
    },60000)
    clearTimeout(v1)
    })

    este es el boton con que se cierra la ventana
    $(‘#cerrarvideo1’).click(function(){
    $(‘#video1’).hide()
    })

    quiero que este ultimo codigo me detenga el setTimeout
    ayudaaa ya un semana y sin solucion

    1. Analiza este código, yo lo uso para dar un tiempo de espera antes de ejecutar una accion, la variable cc es el tiempo en segundos que se desea dar, si quieres truncar el proceso antes de tiempo solo asigna un valor negativo a la variable cc y para de contar. A mi me funciona perfectamente. Espero que te sirva.

      /*FUNCION TIMER, CUENTA REGRESIVA*/
      var timer;
      var cc = 10;
      function cuenta(){

      clearTimeout(timer);
      cc=cc-1;
      $(«#min»).html(cc+’intento:’+intento);

      if(cc > 0){
      timer=setTimeout(function() {
      //console.log(cc);
      cuenta();
      }, 1000);
      }else
      {
      if (cc==0){

      $(‘.tiempo’).addClass(‘incorrecto fuente blanco centrar’).html(‘Se te acabó el tiempo’).fadeIn();
      $(‘#opciones’).hide();
      $(‘#siguiente’).fadeIn();
      cc=10;

      }

      cc=10;
      }
      }
      /* FIN DE LA FUNCION TIMER, CUENTA REGRESIVA*/

    2. Prueba ésto a ver:
      $(‘#cerrarvideo1’).click(function(){

      cleartimeout(v1); // lo tenías en el evento anterior, pero no lo has puesto en el evento cerrarvideo 🙂

      $(‘#video1’).hide()
      })

  5. Alguien puede ayudarme con java script..

    Como puedo hacer un codigo que al pulsal un boton en una pagina web , la funcion onmousedown, mantenga el objeto por un tiempo de 3000 milisegundos, y se ejecute la accion del mouse despues de concluir ese tiempo… Gracias

  6. tengo este código, tipea y borra y vuelve a tipear , el problema es que no puedo hacer que se detenga unos 3 segundos después de tipear cada palabra

    var words = [‘coolfdfdf’, ‘ddfdfdfdev’, ‘nedfdfdrd’, ‘dgdfdfdratis’, ‘dfdfdfdfdfcoder’],
    wordWrapper = document.getElementById(‘word’),
    wordWrapperContent = wordWrapper.innerHTML,
    addingWord = false,
    counter = 2;

    setInterval(function(){

    if(wordWrapperContent.length > 0 && !addingWord ) {
    wordWrapper.innerHTML = wordWrapperContent.slice(0, -1);
    wordWrapperContent = wordWrapper.innerHTML;
    } else {
    addingWord = true;
    }

    if( addingWord ){
    if( wordWrapperContent.length < words[counter].length ) {
    wordWrapper.innerHTML = words[counter].slice(0, wordWrapperContent.length + 1);
    wordWrapperContent = wordWrapper.innerHTML;
    } else {
    if( counter < words.length) {
    counter ++
    }
    addingWord = false;
    }
    }

    if( counter == words.length) {
    counter = 0;
    }

    }, 100);

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *