Question

我有一个计时器，在我的应用程序加载时开始。但我想点击按钮重置我的计时器。但是当我尝试重置计时器时，奇怪的值开始显示在计时器部分。

请在下面找到我的代码：

HTML：

    <font size="4"><span class="myClass" id="time">02:00</span></font>   
<button onclick="myFunction()">Click me</button>

使用Javascript：

$( document ).ready(function() 
            {
                var minute = 60 * 2,
                display = document.querySelector('#time');
                begin(minute, display);

            });


function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
begin(minute, display);

}

    function begin(duration, display) {
                var timer = duration, minutes, seconds;
                setInterval(function () {
                    minutes = parseInt(timer / 60, 10)
                    seconds = parseInt(timer % 60, 10);

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    display.textContent = minutes + ":" + seconds;

                    if (--timer < 0) 
                    {
                        timer = duration;
                    }
                }, 1000);
            }

Answer 1

我认为您有多个时间间隔同时运行，因此您需要使用clearInterval（interval）清理它们;

$( document ).ready(function() 
        {
            var minute = 60 * 2,
            display = document.querySelector('#time');
            begin(minute, display);

        });
var interval;

function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
clearInterval(interval);
begin(minute, display);
}

function begin(duration, display) {
            var timer = duration, minutes, seconds;
            interval = setInterval(function () {
                minutes = parseInt(timer / 60, 10)
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) 
                {
                    timer = duration;
                }
            }, 1000);
        }

像这样的东西。

Answer 2

在我的函数中，使用innerHTML或innerTEXT重置计时器值

function myFunction()
{
  var minute = 60 * 2,
  display = document.querySelector('#time');
  display.innerHTML = '02:00';
  begin(minute, display);

}

Answer 3

尝试使用变量引用Interval。

var myInterval = setInterval(function(){
....
....
....
},1000);


// Button Click ->
clearInterval(myInterval);

Answer 4

您需要停止setInterval。因此，创建一个全局变量var refreshIntervalId = null。在begin()函数内部，将此行插入顶部

if (refreshIntervalId) {
    clearInterval(refreshIntervalId);
}

并像这样调用setInterval

refreshIntervalId = setInterval(function () { ..

这已经足够了。

Answer 5

Javascript setInterval()方法返回一个间隔Id，可用于终止/停止间隔。使用clearInterval()函数可以停止方法执行循环。

在你的情况下，只需存储间隔Id，然后在点击事件功能上添加clearInterval(intervalId)功能并传递间隔Id。

var intervalId = null;
    myFunction(){
         if(intervalId != null){
          clearInterval(intervalId);
         }
    var minute = 60 * 2;
        display = document.querySelector('#time');
        begin(minute, display);
    }

存储间隔ID

intervaluId = setInterval(function(){ ....
                          },1000)

如何在javascript / Jquery中重置计时器？

5 个答案: