Issue with triggering a function after has been run initially

Viewed 72

I have a function called pageReload which sets the a timer and variables back on that page to start, when the time is counting down, however when the timer reaches 0 it seems to disable the function even though when the function is called again the time should be set back to 18 as specified in the function.

When it's between 18 and 0 it trigger ok and sets the time back to 18, the other parts seems to work ok (number of tries and matches set back)

I've tried different variations without getting it to work so below if the function together with the other code in the app which might give a bit of context to what I'm doing

      "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++; 

      }
1 Answers

I'm not 100% sure as I don't think this is all of the code, but I have a feeling that you are stopping your timer in the completed() function using clearInterval() and never restarting it?

Presuming this is the cause, I would try resetting the timer in your page reload function.

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++; 

      }

This makes the timer code a little fragile, so you could refactor the timer logic out into its own functions and do something like this to make things a little clearer:

let timerId = undefined;

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

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

You would then remove all of you existing timer code and call startTimer() in pageReloaded() and stopTimer() in completed()

Related