使用javascript,jQuery启动和停止/暂停setInterval

Question

我试图暂停,然后玩,setInterval循环.

在我停止循环后,我尝试的"开始"按钮似乎不起作用:

HTML:

input = document.getElementById("input");

function start() {
  add = setInterval("input.value++", 1000);
}
start();

JS:

<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />

有没有更好/更有效的方法来做到这一点？你可以自由使用jQuery.

谢谢!

Answer 1

请参阅jsFiddle的工作演示: http ://jsfiddle.net/qHL8Z/3/

HTML

$(function() {
    var timer = null,
    interval = 1000,
    value = 0;

    $("#start").click(function() {
        if (timer !== null) return;
        timer = setInterval(function() {
            // $("#input").val(++value);
            // second = ++value;
            ++value;
            generateTime(value);
        }, interval);
    });

    $("#stop").click(function() {
        clearInterval(timer);
        timer = null
    });
});


function generateTime(value)
{
    var second = value % 60;
    var minute = Math.floor(value / 60) % 60;
    var hour = Math.floor(value / 3600) % 60;
    
    second = (second < 10) ? '0'+second : second;
    minute = (minute < 10) ? '0'+minute : minute;
    hour = (hour < 10) ? '0'+hour : hour;
    
    // $('div.timer span.second').html(second);
    // $('div.timer span.minute').html(minute);
    // $('div.timer span.hour').html(hour);

    $("#input").val(hour+'-'+minute+'-'+second);
}

使用Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" />
<input id="stop" type="button" value="stop" />
<input id="start" type="button" value="start" />

Answer 2

您遇到此特定问题的原因:

jsFiddle将您的代码包装在函数中,因此start()未在全局范围中定义.

故事的道德:不要使用内联事件绑定.使用addEventListener/ attachEvent.

其他说明:

请不要将字符串传递给setTimeout和setInterval.这是eval伪装的.

使用一个函数,并获得舒适var和白色空间:

var input = document.getElementById("input"),
  add;

function start() {
  add = setInterval(function() {
    input.value++;
  }, 1000);
}

start();

Answer 3

正如你已经标记了这个jQuery ......

首先,在输入按钮上放置ID并删除内联处理程序:

<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>

然后将所有状态和函数封装在一个闭包中:

编辑更新了更清洁的实现,也解决了@Esailija对使用的担忧setInterval().

$(function() {
    var timer = null;
    var input = document.getElementById('input');

    function tick() {
        ++input.value;
        start();        // restart the timer
    };

    function start() {  // use a one-off timer
        timer = setTimeout(tick, 1000);
    };

    function stop() {
        clearTimeout(timer);
    };

    $('#start').bind("click", start); // use .on in jQuery 1.7+
    $('#stop').bind("click", stop);

    start();  // if you want it to auto-start
});

这可确保您的所有变量都不会泄漏到全局范围内,也无法从外部进行修改.

(更新)http://jsfiddle.net/alnitak/Q6RhG/的工作演示

Answer 4

add 是局部变量而不是全局变量试试这个

var add;
var input = document.getElementById("input");

function start() {
  add = setInterval("input.value++", 1000);
}
start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />