jquery - 如何杀死 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/

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);

小提琴

Answer 2

你真的应该看看.setTimeout

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

Answer 3

首先，您需要将 setTimeout 分配给一个变量。

var timeout = setTimeout(..

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

Answer 4

使用间隔进行倒计时怎么样？这是一个替代解决方案（DEMO）：

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();