web-dev-qa-db-fra.com

Comment utiliser correctement setInterval et clearInterval pour basculer entre deux fonctions différentes?

Pour la pratique, j'essaie d'afficher un nombre qui augmente de 0 à 9, puis diminue de 9 à 0 et se répète à l'infini.

Le code que j'ai jusqu'à présent semble proche, mais à la deuxième itération, les appels setInterval de mes 2 fonctions respectives countUp et countDown semblent être en conflit les uns avec les autres, car les chiffres affichés ne comptent pas dans l'ordre prévu ... et le navigateur se bloque.

Voici mon code:

<!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>
javascriptanimationcountersetintervalclearinterval
15
Ian Campbell

Vous devez capturer la valeur de retour de setInterval( ... ) dans une variable car c'est la référence à la minuterie:

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

@Claude, vous avez raison, l'autre solution que j'ai proposée était trop différente du code d'origine. Ceci est une autre solution possible, en utilisant setInterval et des fonctions de commutation:

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);
}
6
Gerardo Lima

clearInterval(this);. Tu ne peux pas faire ça. Vous devez enregistrer la valeur de retour de 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);
    }       
}
4
Rocket Hazmat

essaye ça:

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

vous pouvez également créer une référence unique à #here élément. Utilisez toujours === au lieu de ==

1
fcalderan

Il existe de nombreuses façons de résoudre ce problème, voici ma suggestion:

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: il est plus sûr d'utiliser setTimeout que setInteval.

0
Gerardo Lima
    /** 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()

Le journal de la console montre que cela fonctionne

0
Flavio