如何终止JavaScript的setTimeout循环

Question

我有一个正常工作的循环：

function countdown(counter) {
    x = counter;
    if (x > 0) {
        x--;
        alert(x + "/5");
        if (x > 0) {
            setTimeout(function () {
                countdown(x);
            }, 500);
        }
    }
};

countdown(6);

我希望能通过按一个按钮来停止并重新开始循环，不管在我按下按钮时它进行到了哪个数。我已经努力尝试了几个小时。

这里提供了一个jsfiddle链接：http://jsfiddle.net/4vtPH/4/

- Starkers

---

全局状态似乎是唯一的答案。 - Ven

将 setTimeout 的返回值保存在某个地方。调用 clearTimeout，然后重新调用 countdown(6);。 - gen_Eric

不确定，但setInterval可能更适合你的情况？https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval 它还有一个类似于timeout的clear方法。 - house9

Answer 1

您可以使用clearTimeout(文档)。

var timeout;
function countdown(counter) {
    x = counter;
    if (x > 0) {
        x--;
        alert(x + "/5");
        if (x > 0) {
            timeout = setTimeout(function () {
                countdown(x);
            }, 2000);
        }
    }
};
$('input').click(function() {
    clearTimeout(timeout);
    countdown(6);
});
countdown(6);

Fiddle

- Dan-Nolan

---

嗨，我已经使用了相同的clearTimeout()函数来清除已经运行的循环。但是它仍然在运行已经创建的实例。因此，在使用clearTimeout()之后，我尝试创建新实例。但是它并没有清除先前的实例，而是添加为另一个并发循环。你能帮我销毁以前的实例吗？ - Yuvaranjani

Answer 2

如何使用间隔进行倒计时？这里有一个替代方案（演示）：

function Countdown(counter) {
    this.interval = 0;
    this.x = counter;
    console.log(this.x + "/"+counter);
    this.start = function() {
        var self = this;
        this.interval = setInterval(function () {
            self.x--;
            console.log(self.x + "/"+counter);
            if(self.x == 0) self.stop();
        }, 2000);
    };

    this.stop = function() {
        clearInterval(this.interval);  
    };
};

var c = new Countdown(7);
c.start();

var c2 = new Countdown(4);

c2.start();

- Marcel Gwerder

Answer 3

你真的应该查看 setTimeout 的文档。

它返回一个超时id，你可以用它和clearTimeout一起使用来重置。

- DaoWen

Answer 4

首先，你需要将setTimeout赋值给一个变量。

var timeout = setTimeout(..

然后在需要的时候，您可以使用clearTimeout(timeout)。确保您的timeout变量在范围内，以便您可以在任何需要访问它的地方访问它。

- marteljn