Question

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);那就是显示两个倒计时的电影

Answer 1

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

我建议从函数中返回间隔，并允许自己将该间隔作为参数传递。这样你就可以在开始之前取消间隔（如果已经有一段时间）。如果您为区间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);

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

Answer 2

避免修改代码的另一种方法是：

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);

javascript倒计时定时器在多次调用时闪烁

2 个答案: