javascript - 使用 onclick 事件停止 javascript 倒数计时器

Question

我需要帮助，我为带进度条的倒数计时器制作了一个 javascript 函数，这是代码

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html('');
        $('#time_wrap').html('<span id="timer">'+timeleft+'</span>');
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }else{
            setTimeout(function() {
            submitdata();
        }, 1000);
        }
    };

我需要用 onclick 事件停止计时器，例如:<input type="button" onclick="stoptimer();">

如何使用函数 stoptimer() 停止定时器？

Answer 1

您要找的是clearTimeout .

您可以将代码修改为:

var timer = null;

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html('');
        $('#time_wrap').html('<span id="timer">'+timeleft+'</span>');
    if(timeleft > 0) {
        timer = setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    } else{
        timer = setTimeout(function() {
            submitdata();
        }, 1000);
    }

    // You can use this to bind event only after the timer is set.
    // $('#stop-btn').on('click', function() { 
    //    clearTimeout(timer);
    // });
};

function stoptimer() {
    clearTimeout(timer);
}