javascript - setinterval 方法不起作用

Question

我有一个按钮，每 1 秒触发一次设置间隔内的功能。按钮的值变为停止。当我点击停止时，我调用 clearinterval 方法。由于某种原因，清除间隔方法不起作用。

这是我的输入

<input id="trigger" type="button" value="start"/>

我的js函数

$(function() {
    $('#trigger').click(function() {
        var timerId = 0;
        var trigger = $('#trigger').val();

        if(trigger == 'start') {
            timerId = setInterval(function() {
                $('#trigger').val('stop');
                main();
            }, 1000);
        } else if(trigger == 'stop') {
                clearInterval(timerId);
                $('#trigger').val('start');                
        }
    });
});

Answer 1

您将 timerId 定义为 click() 范围的本地，因此当您第二次运行它时（在停止事件中），它将再次为 0。试试这个

var timerId = 0;
$(function() {
    $('#trigger').click(function() {
        var trigger = $('#trigger').val();

        if(trigger == 'start') {
            timerId = setInterval(function() {
                $('#trigger').val('stop');
                main();
            }, 1000);
        } else if(trigger == 'stop') {
                clearInterval(timerId);
                $('#trigger').val('start');                
        }
    });
});

Answer 2

每次单击 #trigger 时，您都会重新初始化 timerId。移动 var timerId = 0;外点击功能