用javascript启动和停止/重置计时器

start and stop/reset a timer in javascript

本文关键字：计时器 javascript 启动      更新时间：2023-09-26

所以我试图制作一个函数，你点击一个按钮，一个框变成红色，从300开始倒计时，然后变回绿色，我已经完成了这一切，但如果你再次点击按钮，它会越来越快地倒计时，所以我想让它停止按钮，这样你就可以再次点击它，并基本上重置它，这样你不必等待计时器，现在我有这个，但它不起作用

function alttimer(timernum){
if($(alt1but).val() == "Start") //button is start
    {
        $(alt1color).attr("src", "red.png");
        alttimer1();
        $(alt1but).val("Stop");
    }
    else //button is stop
    {
        $(alt1but).val("Start");
        clearTimeout(alttimer2);
        $(alt1color).attr("src", "green.png");
        t1 = '300';
        $('#alt1tim').attr("value", "");
    }
};
var alttimer1;
alttimer1 = setTimeout("function(){
            if(t1 == '0')
            {
                $(alt1color).attr('src', 'green.png');
                name = $('#alt1t').val();
                $('#alt21im').attr('value', '');
                t1 = '300';
            }
            else
            {
                $('#alt1tim').attr('value', t1);
                t1--;
            }
};",1000);

你正在做的事情有点奇怪。我完全建议你做一件不同的事情：

var counter = 300;
var active = false;
var intervalId = -1;
function alttimer(){
    if(!active) //button is start
    {
        $(alt1color).attr("src", "red.png");
        intervalId = startTimer();
        $(alt1but).val("Stop");
    }
    else //button is stop
    {
        $(alt1but).val("Start");
        clearTimeout(intervalId);
        counter = 300;
        $(alt1color).attr("src", "green.png");
        $('#alt1tim').attr("value", "");
}};
function startTimer() {
    return setTimeout(function(){
        if(t1 == '0')
        {
            $(alt1color).attr('src', 'green.png');
            $('#alt21im').attr('value', '');
            counter = 300;
        }
        else
        {
            counter--;
            $('#alt1tim').attr('value', counter);
        }
    },1000);
}

试试这样的东西。我没有测试代码，但应该可以工作。

顺便说一句，您不必将函数创建为字符串。

祝好运

相关文章：