Question

我有一个名为pageReload的函数，该函数将计时器和该变量设置为在该页面上重新开始，当时间递减时，但是，当计时器达到0时，即使再次调用该函数，它似乎也会禁用该功能。时间应重新设置为该函数中指定的18。

当它介于18到0之间时，它会触发ok，并将时间设置回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（）函数中停止计时器，并且从不重新启动它？< / p>

假设这是原因，我将尝试在页面重新加载功能中重置计时器。

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（）

最初运行后触发功能的问题

1 个答案: