如何正确使用 setInterval 和 clearInterval 在两个不同的函数之间切换

How do I correctly use setInterval and clearInterval to switch between two different functions?

本文关键字：两个 函数 之间 何正确 setInterval clearInterval      更新时间：2023-09-26

为了练习，我试图显示一个从 0 - 9 递增的数字，然后从 9 - 0 递减，并无限重复.

到目前为止，我拥有的代码似乎很接近，但在第二次迭代时，我的 2 个相应函数的 setInterval 次调用似乎相互冲突countUp和countDown， 由于显示的数字未按预期顺序计算...然后浏览器崩溃.

这是我的代码：

<!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>
您需要将

返回值从setInterval( ... )捕获到变量中，因为这是对计时器的引用：

var interval;
var count = 0;
function onloadFunctions()
{
    countUp();
    interval = setInterval(countUp, 200);
}
/* ... code ... */
function countUp()
{
    document.getElementById("here").innerHTML = count;
    count++;
    if(count === 10)
    {
        clearInterval(interval);
        countUp();
        interval = setInterval(countUp, 200);
    }
}

@Claude，你是对的，我提出的另一个解决方案与原始代码太不同了。这是另一种可能的解决方案，使用setInterval和切换功能：

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); . 你不能这么做。 您需要保存 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);
    }       
}

试试这个：

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

还可以创建对#here元素的单个引用。始终使用===而不是==

有很多

方法可以解决这个问题，以下是我的建议：

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：使用setTimeout比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()

控制台日志显示它正在工作

相关文章：