javascript - clearInterval 并在 x 秒后再次设置

Question

我想用 if 做简单的间隔，它检查变量的值并执行函数 again()。

again 函数包含clearInterval、i++ 和setTimeout 调用interval again x 秒后

    var speed = 1000;
    var wait = 0;
    var i = 0;

    function init() {
        setInterval(function() {
            if (i >= 6) i = 0;
            if (i == 4) {
                wait = 5000;
                again(wait);
            } else {
                document.body.innerHTML = i;
                i++;
            }
        }, speed);
    }

    function again(time) {
        clearInterval(init());
        i++;
        setTimeout(function() {
            setInterval(init(), speed);
        }, time);
    }
    init();

我期望这样的输出:

1, 2, 3, Waiting x sec's , 5, 1, 2, ...

但是代码正在做一些疯狂的事情，它的速度越来越快。我不知道为什么。

这是一个 codepen示例(可能会使您的浏览器崩溃!)

你能修复它并解释一下吗？谢谢

Answer 1

您不是在清除间隔，而是在 clearInterval 方法中使用函数。使用的方法 init 没有返回语句，因此 clearInterval 在属性中未定义，因此它不会清除任何内容。

固定代码:

var speed = 1000;
var wait = 0;
var i = 0;
var interval=null;

function init() {
    interval = setInterval(function() {
        if (i >= 6) i = 0;
        if (i == 4) {
            wait = 5000;
            again(wait);
        } else {
            document.body.innerHTML = i;
            i++;
        }
    }, speed);
}

function again(time) {
    clearInterval(interval);
    i++;
    setTimeout(function() {

    init()

    }, time);
}

init();

函数 setInterval 返回间隔 id，属性中的函数 clearInterval 应该获取我们要停止的间隔的 id，所以我创建了间隔变量来保存 id。我在 clearInterval 中使用这个变量。