javascript - 最初运行后触发函数的问题

Question

我有一个名为 pageReload 的函数，当时间倒计时时，它将计时器和变量设置回该页面以启动，但是当计时器达到 0 时，即使再次调用该函数，它似乎也会禁用该函数时间应设置回函数中指定的 18。

当它在 18 和 0 之间时，它会触发正常并将时间设置回 18，其他部分似乎工作正常(尝试次数和匹配次数设置回来)

我尝试了不同的变体，但没有让它工作，所以下面如果该函数与应用程序中的其他代码一起使用，这可能会给我正在做的事情提供一些背景

      "use strict";
      //select each card
      const cards = document.querySelectorAll('.card');

      let isFlipped = false;
      let setBoard = false;
      let first, second;
      let counter = 1;

      //add event listeners to each square
      for(let i = 0; i < cards.length; i++) {
        let element = cards[i];
        element.addEventListener('click', flipSquare);
      }

      function checkForMatch() {
        //check for 2 matching squares
        let isMatch = first.classList.value === second.classList.value; 
        $('#counter').html(`The number of tries made is: ${counter++}`);
        isMatch ? disable() : unflip();

        //check to see if completed - if so, score will be displayed
        completed();  
      }

      function checkScore(){
          //determing whether a score A, B or unsuccessful were acheived
        if(counter <= 15) {
           $('#score').html("You got an A");
          }
          else if(counter > 15 && counter <= 20){
             $('#score').html("You got an B");
          } else {
             $('#score').html("You had too many attempts and were therefore unsuccessful");
          }
      }

      function completed(){
        //pop up if all have been disabled
        if($('.card:not(.open)').length === 0){    
           //display modal
           $("#myModal").modal('show');
           clearInterval(timerId);  
           clearTimeout(myTimeout);
           elemComplete.html(timeComplete + ' seconds comleted in');
          }
        //check score on completion and output the result
        checkScore(); 
      }

      let timeLeft = 18;
      let timeComplete;
      let elem = $('#some_div');
      let elemComplete = $('#new_div');
      let timerId = setInterval(showClock, 1000);


      function shuffleCards() { 
        //give square random positions 
        for(let i = 0; i < cards.length; i++) {
        let ramdomPos = Math.ceil(Math.random() * 12);
        cards[i].style.order = ramdomPos;
        }  
      }

      function pageReload(){
        shuffleCards();
        //loop through any open cards to and remove their open status and add back click function to unflipped card
        for(let i = 0; i < cards.length; i++) {
          $(".card").removeClass('open');
          let element = cards[i];
          element.addEventListener('click', flipSquare);
        }

        isFlipped = false;
        setBoard = false;

        timeLeft = 18;
        counter = 0;
        n = 0;

        $('#counter').html(`The number of tries made is: ${counter}`);  
        $('#updated').html(`The number of matches made is: ${n}`);

        counter++; 

      }

Answer 1

我不是100%确定，因为我不认为这是全部代码，但我有一种感觉，您正在使用clearInterval()在completed()函数中停止计时器并且从不重新启动它？

假设这是原因，我会尝试在页面重新加载函数中重置计时器。

function pageReload(){
        shuffleCards();
        //loop through any open cards to and remove their open status and add back click function to unflipped card
        for(let i = 0; i < cards.length; i++) {
          $(".card").removeClass('open');
          let element = cards[i];
          element.addEventListener('click', flipSquare);
        }

        isFlipped = false;
        setBoard = false;

        timeLeft = 18;
        counter = 0;
        n = 0;

        timerId = setInterval(showClock, 1000);

        $('#counter').html(`The number of tries made is: ${counter}`);  
        $('#updated').html(`The number of matches made is: ${n}`);

        counter++; 

      }

这使得计时器代码有点脆弱，因此您可以将计时器逻辑重构为它自己的函数，并执行以下操作以使事情变得更清晰:

let timerId = undefined;

function startTimer() {
    if (timerId != undefined) {
        stopTimer();
    }
    timerId = setInterval(showClock, 1000);
}

function stopTimer() {
    clearInterval(timerId);
    timerId = undefined;
}

然后，您将删除所有现有的计时器代码，并在 pageReloaded() 中调用 startTimer() 并在 Completed() 中调用 stopTimer()