¿Cómo uso correctamente setInterval y clearInterval para cambiar entre dos funciones diferentes?

Para la práctica, estoy tratando de mostrar un número que aumenta de 0 a 9, luego disminuye de 9 a 0 y se repite infinitamente.

El código que tengo hasta ahora parece estar cerca, pero en la segunda iteración las llamadas setInterval de mis 2 funciones respectivas countUp y countDown parecen estar en conflicto entre ellas, ya que los números que se muestran no cuentan en el orden previsto. .. y luego el navegador se bloquea.

Aquí está mi código:

¿Cómo uso correctamente setInterval y clearInterval para cambiar entre dos funciones diferentes?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Algorithm Test</title> 
    </head> 

    <body onload = "onloadFunctions();"> 
     <script type = "text/javascript"> 
      function onloadFunctions() 
      { 
       countUp(); 
       setInterval(countUp, 200); 
      } 

      var count = 0; 
      function countUp() 
      { 
       document.getElementById("here").innerHTML = count; 
       count++; 

       if(count == 10) 
       { 
        clearInterval(this); 
        countDown(); 
        setInterval(countDown, 200); 
       } 
      } 
      function countDown() 
      { 
       document.getElementById("here").innerHTML = count; 
       count--; 

       if(count == 0) 
       { 
        clearInterval(this); 
        countUp(); 
        setInterval(countUp, 200); 
       }  
      } 
     </script> 

     From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div> 
    </body> 
</html>

Fuente

2012-05-07 Ian Campbell

Es necesario para capturar el valor de retorno de setInterval(...) en una variable ya que es la referencia al temporizador:

var interval; 

function onloadFunctions() 
{ 
    countUp(); 
    interval = setInterval(countUp, 200); 
} 

/* ... code ... */ 

function countDown() 
{ 
    document.getElementById("here").innerHTML = count; 
    count--; 

    if(count == 0) 
    { 
     clearInterval(interval); 
     countUp(); 
     interval = setInterval(countUp, 200); 
    } 
}

Fuente

2012-05-07 16:11:44 xandercoded

¡Gracias, eso funcionó! –

clearInterval(this);. No puedes hacer eso. Debe guardar el valor devuelto en setInterval.

var interval; 
function onloadFunctions() 
{ 
    countUp(); 
    interval = setInterval(countUp, 200); 
} 

var count = 0; 
function countUp() 
{ 
    document.getElementById("here").innerHTML = count; 
    count++; 

    if(count == 10) 
    { 
     clearInterval(interval); 
     countDown(); 
     interval = setInterval(countDown, 200); 
    } 
} 
function countDown() 
{ 
    document.getElementById("here").innerHTML = count; 
    count--; 

    if(count == 0) 
    { 
     clearInterval(interval); 
     countUp(); 
     interval = setInterval(countUp, 200); 
    }  
}

Fuente

2012-05-07 16:13:54

probar esto:

... 
<body onload = "onloadFunctions();"> 

    <script> 
     var cup, cdown; // intervals 
     var count = 0, 
      here = document.getElementById("here"); 

     function onloadFunctions() { 
      cup = setInterval(countUp, 200); 
     } 

     function countUp() { 
      here.innerHTML = count; 
      count++; 

      if(count === 10) { 
       clearInterval(cup); 
       cdown = setInterval(countDown, 200); 
      } 
     } 
     function countDown() { 
      here.innerHTML = count; 
      count--; 

      if(count === 0) { 
       clearInterval(cdown); 
       cup = setInterval(countUp, 200); 
      }  
     } 
    </script> 

    From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div> 
</body>

también se puede crear una sola referencia a #here elemento. Utilice siempre === en lugar de ==

Fuente

2012-05-07 16:15:02 fcalderan

Hay muchas maneras de resolver este problema, el siguiente es mi sugerencia:

function onloadFunctions() { 
    var count = 0; 
    var delta = 1; 
    var target = document.getElementById("here"); 
    var step = function() { 
     if(count <= 0) delta = 1; 
     if(count >= 9) delta = -1; 
     count += delta; 
     target.innerHTML = count; 
     window.setTimeout(step, 500); 
    } 
    step(); 
}

PS: es más seguro de usar que setTimeoutsetInteval.

Fuente

2012-05-07 16:39:37

Si estaba escribiendo mi propio código, podría preferir una solución como la suya. Pero, el que pregunta está intentando algo para la práctica, es decir, ir y venir entre dos funciones diferentes. En realidad no respondiste su pregunta. – Claude

@ Claude, tienes razón, la otra solución que propuse era muy diferente al código original. Esta es otra posible solución, usando setInterval y funciones de conmutación:

function onloadFunctions() { 
    var count = 0; 
    var refId = null; 
    var target = document.getElementById("aux"); 

    var countUp = function() { 
     target.innerHTML = count; 
     count ++; 
     if(count >= 9) { 
      window.clearInterval(refId); 
      refId = window.setInterval(countDown, 500); 
     } 
    } 

    var countDown = function() { 
     target.innerHTML = count; 
     count --; 
     if(count <= 0) { 
      window.clearInterval(refId); 
      refId = window.setInterval(countUp, 500); 
     } 
    } 
    refId = window.setInterval(countUp, 500); 
}

Fuente

2012-05-07 17:08:18

Ah, con el cierre es interesante, gracias. –

Buena implementación con cierre, me gusta. – ChandlerQ

¿Cómo uso correctamente setInterval y clearInterval para cambiar entre dos funciones diferentes?

Respuesta

Cuestiones relacionadas