javaScript 多次点击链接时会多次开始倒计时

Question

我是 JavaScript 的新手，想实现以下功能：

点击网站上的 link，将启动一个倒计时 15 分钟的计时器。如果 link 只被点击一次，那效果很好。但是如果再次点击 link（或另一个），则会同时显示两个（或更多）倒计时。我尝试了两种不同的方法：第一种是专注于 Date() 对象的代码，第二种是处理连续减少一秒的变量的版本。这两个代码（当然）都基于 setInterval() 函数。

在第一种情况下，stopZeit 的日志显示每次单击 link 都会创建一个新值 stopZeit。在第二种情况下 console.log(timerLaenge) 显示 30 无论点击 link 的频率如何，但是有多个计时器启动。

这是我的两次尝试：

版本一：

function timer(stopZeit); //stopZeit = time now plus 15min - must be fixed, otherwise it will be actualized everytime the function is called
{
    console.log(stopZeit);

    var countdown = setInterval(function()
    {
        var jetzt = new Date().getTime();       //now
        var differenz = stopZeit - jetzt;       //time difference

        var minuten = Math.floor((differenz % (1000 * 60 * 60)) / (1000 * 60)); //calculate remaining minutes
        var sekunden = Math.floor((differenz % (1000 * 60)) / 1000);    //calculate remaining seconds

        document.getElementById("countdown").innerHTML = minuten + 'm ' + sekunden + 's ';  //write down the current time difference

        if(differenz < 0)   //check if timer is expired
        {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = 'Timer abgelaufen!';
        }

    },1000);
}

<p id="countdown"></p>

<a href="#" id="neuerLink" onclick="var stopZeit = 0; stopZeit = new Date().getTime()+90000; timer(stopZeit);">Link01</a> <!--declare stopZeit as constant and hand it over to the timer function. -->
<br>
<br>
<a href="##" id="neuerLink" onclick="var stopZeit = 0; stopZeit = new Date().getTime()+90000; timer(stopZeit);">Link02</a> <!--another link-->

版本二：

function timer()
{
    timerLaenge = 30;       //length of timer
    console.log(timerLaenge);

    var countdown = setInterval(function()
    {
        timerLaenge = timerLaenge-1;

        document.getElementById("countdown").innerHTML = timerLaenge + 's';

        if(timerLaenge < 0)
        {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = 'Timer abgelaufen!';
        }

    },1000);
}

<p id="countdown"></p>

<a href="#" id="neuerLink" onclick="timer();">Link01</a>
<br>
<br>
<a href="##" id="neuerLink" onclick="timer();">Link02</a>

如何实现每次再次单击 link 时重置计时器？

Answer 1

欢迎，AlexR_112！

问题是 var countdown 发生在 timer() 的范围内，并且 countdown 在每次点击时都会被覆盖。解决办法是把它放在外面。

我还添加了一个cancelTimer()，它会停止倒计时，希望它能在以后对你有所帮助)

var countdown;
function timer()
{
    if (countdown) {
      return;
    }
    timerLaenge = 30;       //length of timer
    console.log(timerLaenge);

    countdown = setInterval(function()
    {
        timerLaenge = timerLaenge-1;

        document.getElementById("countdown").innerHTML = timerLaenge + 's';

        if(timerLaenge < 0)
        {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = 'Timer abgelaufen!';
        }

    },1000);
}

function cancelTimer()
{
    if (countdown) {
      clearInterval(countdown);
      countdown = null;
    }
}

<p id="countdown"></p>

<a href="#" id="neuerLink" onclick="timer();">Link01</a>
<br>
<br>
<a href="##" id="neuerLink" onclick="timer();">Link02</a>
<br>
<br>
<a href="##" id="neuerLink" onclick="cancelTimer();">Cancel</a>

Answer 2

要在每次用户单击 link 时重置计时器，您可以在启动新计时器之前先清除现有计时器，使用 clearInterval。

var countdown; // Bring this variable up one scope 
function timer() {
  timerLaenge = 30; //length of timer
  if(countdown) clearInterval(countdown); // Clear the interval here
  countdown = setInterval(function() {
    timerLaenge = timerLaenge - 1;
    document.getElementById("countdown").innerHTML = timerLaenge + 's';
    if (timerLaenge < 0) {
      clearInterval(countdown);
      document.getElementById("countdown").innerHTML = 'Timer abgelaufen!';
    }
  }, 1000);
}

<p id="countdown"></p>

<a href="#" id="neuerLink" onclick="timer();">Link01</a>
<br>
<br>
<a href="##" id="neuerLink" onclick="timer();">Link02</a>

javaScript 多次点击链接时会多次开始倒计时

javaScript countdown starts multiple times when links are clicked more than once

javascript

timer

setinterval