Jquery开始定时器运行非常快

jquery start timer runs very fast

本文关键字：非常 运行 定时器 开始 Jquery      更新时间：2023-09-26

我使用jQuery函数来播放倒计时定时器，但有时经过一些间隔秒手走得非常快，结果时间比定义的时间短得多。

这是我的代码:

function runTimer(){
    total_seconds = 59;
    total_minutes = parseInt($("body").data("exam_time")) - 1;
    examTimer = setInterval(function(){
        $('.countMinutes').find('.digit').html(total_minutes + '<small> mins</small>');
        $('.countSeconds').find('.digit').html(total_seconds + '<small> sec</small>');
        total_seconds = total_seconds - 1;
        if(parseInt(total_seconds) <= 0){
            total_minutes = total_minutes - 1;
            total_seconds = 60;
        }
        if(parseInt(total_minutes) == 5){
            if($("body").data("popUpRemaining") == "true"){
                popUpNot('error','Less than five minutes remaining');
                $("body").data("popUpRemaining","false");
            }
        }
        if(parseInt(total_minutes) <= -1){
            finishExam('timeOver');
            clearInterval(examTimer);
        }
    },1000);
}

我希望，你运行'runTimer()'函数两次的地方。例如，它是点击监听器，你点击两次，或者你绑定它为点击监听器两次，它开始两次后，只需点击一次。

第二个想法是，因为你的计数器是全局变量，也许你在其他地方(在其他函数中)使用了相同的名称。

如果您不能提供样本，这里的人很难复制。由于你的信誉不允许链接atm，请减少你的代码到一个工作的简短的例子，你可以把它放在这里。也许在减少你会注意到自己的错误(我做了几次=)

现在到你的代码:

  • 使用jQuery缓存，不要每次都重新选择元素。这可以节省性能

  • 正确作用域变量以防止意外修改(例如，像下面这样-可能不像那样工作!)

    function runTimer(){
    var $body = $('body');
    var $min = $('.countMinutes .digit');
    var $sec = $('.countSeconds .digit');
    var total_seconds = 59;
    var total_minutes = parseInt($body.data("exam_time")) - 1;
    var examTimer = setInterval(function(){
        $min.html(total_minutes + '<small> mins</small>');
        $sec.html(total_seconds + '<small> sec</small>');
        total_seconds = total_seconds - 1;
        if (parseInt(total_seconds) <= 0){
            total_minutes = total_minutes - 1;
            total_seconds = 60;
        }
        if (parseInt(total_minutes) == 5){
            if ($body.data("popUpRemaining") == "true"){
                popUpNot('error','Less than five minutes remaining');
                $body.data("popUpRemaining","false");
            }
        }
        if (parseInt(total_minutes) <= -1){
            finishExam('timeOver');
            clearInterval(examTimer);
        }
    },1000);
}

  • 不使用复杂的时间开关逻辑。在您的情况下，使用秒和计算分钟，这将使它更容易理解和减少错误。

    var body = document.getElementsByTagName('body')[0];
function runTimer(){
    var totalSec = 600; // 10 min
    var digitMin = Math.floor(totalSec / 60);
    var digitSec = totalSec % 60;
    totalSec++;
    var timer = setInterval(function(){
        totalSec -= 1;
        digitMin = Math.floor(totalSec / 60);
        digitSec = totalSec % 60;
        if (totalSec == 0){
            clearInterval(timer);
        }
        body.innerText = digitMin +':'+ digitSec;
    },1000);
}
runTimer();

    http://jsfiddle.net/Lsrxh/

相关文章：