Come utilizzo correttamente setInterval e clearInterval per passare tra due diverse funzioni?

Per esercitazioni, sto provando a visualizzare un numero che va da 0 a 9, quindi decrementa da 9 a 0 e si ripete all'infinito.

Il codice che ho finora sembra essere vicino, ma alla seconda iterazione le chiamate setInterval delle mie 2 rispettive funzioni e countDown sembrano essere in conflitto tra loro, poiché i numeri visualizzati non contano nell'ordine previsto. .. e poi il browser si blocca.

Ecco il mio codice:

Come utilizzo correttamente setInterval e clearInterval per passare tra due diverse funzioni?

<!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>

fonte

2012-05-07 Ian Campbell

è necessario per catturare il valore restituito da setInterval(...) in una variabile come quello è il riferimento al timer:

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); 
    } 
}

fonte

2012-05-07 16:11:44 xandercoded

Grazie, ha fatto il trucco! –

clearInterval(this);. Non puoi farlo. È necessario salvare il valore restituito da 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); 
    }  
}

fonte

2012-05-07 16:13:54

provare questo:

... 
<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>

si potrebbe anche creare un unico riferimento a #here elemento. Utilizzare sempre === invece di ==

fonte

2012-05-07 16:15:02 fcalderan

Ci sono molti modi per risolvere questo problema, il seguente è il mio suggerimento:

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: è più sicuro da usare rispetto setTimeoutsetInteval.

fonte

2012-05-07 16:39:37

Se scrivessi il mio codice, potrei preferire una soluzione come la tua. Ma l'interlocutore sta provando qualcosa per la pratica, cioè saltando avanti e indietro tra due diverse funzioni. In realtà non hai risposto alla sua domanda. – Claude

@Claude, hai ragione, l'altra soluzione che ho proposto era troppo diverso da codice originale. Questa è un'altra possibile soluzione, utilizzando setInterval e le funzioni di commutazione:

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); 
}

fonte

2012-05-07 17:08:18

Ah, con la chiusura è interessante, grazie. –

Bella implementazione con chiusura, piace. – ChandlerQ

Come utilizzo correttamente setInterval e clearInterval per passare tra due diverse funzioni?

risposta

Problemi correlati