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

Per esercitarsi, 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 countUp 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:

    Algorithm Test    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); } }  From 0 - 9, up and down:  

È necessario acquisire il valore restituito da setInterval( ... ) in una variabile poiché questo è 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); } } 

@Claude, hai ragione, l’altra soluzione che ho proposto era troppo diversa dal codice originale. Questa è un’altra ansible soluzione, utilizzando setInterval e 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); } 

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

prova questo:

 ...   From 0 - 9, up and down:  

potresti anche creare un singolo riferimento all’elemento #here . Usa sempre === invece di ==

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 usare setTimeout di setInteval .

  /** Tools */ const log = require('ololog').configure({ locate: false }) let count = 0 let interval__UP let interval__DOWN function countUp () { count++ log.green('countUp(): ', count) if (count == 5) { clearInterval(interval__UP) interval__DOWN = setInterval(function () { countDown() }, 1000) } } function countDown () { count-- log.red('countDown(): ', count) if (count == 0) { clearInterval(interval__DOWN) interval__UP = setInterval(function () { countUp() }, 3000) } } function start () { countUp() log.cyan('start()') interval__UP = setInterval(function () { countUp() }, 2000) } start() 

Console Log mostra che funziona