javaScript обратный отсчет начинается несколько раз, когда ссылки нажимаются более одного раза - PullRequest
Новая
       16

javaScript обратный отсчет начинается несколько раз, когда ссылки нажимаются более одного раза

0 голосов
/ 16 января 2020

Я довольно новичок в JavaScript и хотел бы реализовать следующую функцию:

При нажатии на ссылку на сайте запускается таймер с 15-минутным обратным отсчетом. Это прекрасно работает, если ссылка нажата только один раз. Но если щелкнуть ссылку (или другую) еще раз, два (или более) обратного отсчета отображаются параллельно. Я попробовал два разных подхода: во-первых, код, который фокусируется на объекте Date(), а во-вторых, версия, которая обрабатывает переменную, которая последовательно уменьшается на одну секунду. Оба кода (разумеется) основаны на функции setInterval().

В первом случае журнал stopZeit показывает, что при каждом нажатии на ссылку создается новое значение stopZeit. Во втором случае console.log(timerLaenge) показывает 30 независимо от того, как часто нажимается ссылка, но запускается несколько таймеров.

Вот мои две попытки:

Первая версия: 

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>

Как добиться сброса таймера при каждом повторном нажатии на ссылку?

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Для сброса таймера каждый раз, когда пользователь нажимает на ссылку, вы можете очистить существующий таймер перед запуском нового таймера, используя 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>
0 голосов
/ 16 января 2020

Добро пожаловать, 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>
...