JavaScript倒数计时器在多次调用时闪烁

javascript count down timer flickering on calling more than once

本文关键字：调用 闪烁 倒数 计时器 JavaScript      更新时间：2023-09-26
function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter
        if(time == 0) {
            //el.innerHTML = "countdown's over!";
         // document.getElementById("timer").style.visibility="hidden";
            clearInterval(interval);
            return;
        }
        var hour=Math.floor( time / (60*60) );
        if (hour < 10) hour = "0" + hour;
        var minutes = 0;
        if(time>=60 && hour>0)
            minutes=Math.floor( (time / 60 )-60);
        else{
            minutes=Math.floor( (time / 60 ));
        }
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
      //  var text = hour+":"+minutes; //+ ':' + seconds;
        var text = minutes; //+ ':' + seconds;
        el.innerHTML = text;
        time--;
    }, 1000);
}

当我调用方法 2wice 时，它会产生闪烁效果。即 countdown(element, 50, 0);它倒计时，但如果我再次调用它，即 countdown(element, 35, 0);是显示两个倒计时的电影

如果要在同一

元素上调用插件，则需要取消插件初始化时的间隔。否则，您将同时运行两个间隔。

我建议从函数返回间隔，并允许自己将该间隔作为参数传入。这样，您始终可以在开始之前取消间隔（以防已经有一个间隔）。如果传递间隔 var 的null，您仍然可以运行clearInterval()而不会引发错误。

例如：

function countdown(element, minutes, seconds, interval) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    clearInterval(interval);
    return setInterval(function() {
...

您的第一个电话可能是：

var savedInterval = countdown('some-ele-id', 1, 1, null);

您的第二个电话可能是：

var interval = countdown('some-ele-id', 1, 1, savedInterval);

另一种解决方案是将间隔保存为全局变量并取消它，而不将其作为插件中的参数传递。

避免修改代码的替代方法是：

var interval;
...
function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    interval = setInterval(function() {
...

在您的第二个电话中：

clearInterval(interval);
countdown(element, 35, 0);
相关文章：