How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

Question

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

Currently, I'm working on creating a memory card game. In this game, the deck of cards is represented by the class .deck. Strangely enough, every time I click on a card, the timer starts to speed up instead of keeping a consistent pace. How can I tackle this issue and prevent the timer from accelerating?

function startTimer() { 
    $(".deck").on("click", function () {
        nowTime = setInterval(function () {
            $timer.text(`${second}`)
            second = second + 1
        }, 1000);
    });
}

javascript jquery

Answer 1

Answer №1

Instead of initiating multiple intervals every time someone clicks, it would be more efficient to start just one interval. If you only want the timer to start when the first card is clicked:

function startTimer() {
    // It's a good practice to remove any existing timers before starting a new one
    // You might have a function called "stopTimer" that clears the interval.
    clearInterval(nowTime);

    let hasStarted = false;
    $(".deck").on("click", function () {
        if (hasStarted) return;

        nowTime = setInterval(function () {
            $timer.text(`${seconds}`);
            seconds++;
        }, 1000);
        hasStarted = true;
    });
}

However, there are some improvements that can be made to this code. Otherwise, you will accumulate many unused event listeners.

_{(Additionally, I personally believe that using jQuery should be avoided.)}

Answer 2

Instead of initiating multiple intervals every time someone clicks, it would be more efficient to start just one interval. If you only want the timer to start when the first card is clicked:

function startTimer() {
    // It's a good practice to remove any existing timers before starting a new one
    // You might have a function called "stopTimer" that clears the interval.
    clearInterval(nowTime);

    let hasStarted = false;
    $(".deck").on("click", function () {
        if (hasStarted) return;

        nowTime = setInterval(function () {
            $timer.text(`${seconds}`);
            seconds++;
        }, 1000);
        hasStarted = true;
    });
}

However, there are some improvements that can be made to this code. Otherwise, you will accumulate many unused event listeners.

_{(Additionally, I personally believe that using jQuery should be avoided.)}

Answer 3

Answer №2

In order to ensure accurate timing, it is important to stop the previous timer before starting a new one. Failing to do so can result in multiple timer callback functions executing consecutively, giving the false impression that the timer is speeding up.

function initiateTimer() { 
  $(".cards").on("click", function () {
    clearInterval(timer); // Stop previous timer

    timer = setInterval(function () {
      $timerText.text(`${seconds}`);
      seconds++;
    }, 1000);
  });
}

Another approach to tackling this issue is by allowing the click event callback to run only during the initial button click:

function initiateTimer() { 
  $(".cards").on("click", countdown);

  function countdown() {
    timer = setInterval(function () {
      $timerText.text(`${seconds}`);
      seconds++;
    }, 1000);
    $(".cards").off("click", countdown); // Remove the click event handler
  }
}

Answer 4

In order to ensure accurate timing, it is important to stop the previous timer before starting a new one. Failing to do so can result in multiple timer callback functions executing consecutively, giving the false impression that the timer is speeding up.

function initiateTimer() { 
  $(".cards").on("click", function () {
    clearInterval(timer); // Stop previous timer

    timer = setInterval(function () {
      $timerText.text(`${seconds}`);
      seconds++;
    }, 1000);
  });
}

Another approach to tackling this issue is by allowing the click event callback to run only during the initial button click:

function initiateTimer() { 
  $(".cards").on("click", countdown);

  function countdown() {
    timer = setInterval(function () {
      $timerText.text(`${seconds}`);
      seconds++;
    }, 1000);
    $(".cards").off("click", countdown); // Remove the click event handler
  }
}

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

Answer №1

Answer №2

Similar questions

Retrieving parameter values from href using jQuery

The functionality of Jquery-chosen appears to be malfunctioning when applied to a select element

The cloned rows created with jQuery are failing to submit via the post method

Transfer Data from a Factory to a Controller in AngularJS

Retrieve all attributes of an element with the help of jQuery

Modifying CSS using jQuery in a PHP While Loop

A tool that showcases outcomes determined by the interaction of two variables

What is the best way to add content to a box once it has been hovered over?

Struggling to Personalize Kendo Calendar Month templates using Knockout Kendo JS Binding

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

jQuery if statement appears to be malfunctioning

Determine the most recent API response and disregard any outdated responses from previous calls

Only wrap certain elements if they consist of two specific items

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

Looking for a checkbox change event that can detect and respond to changes in the checked state made programmatically

Retrieve outcome from successful AJAX post and update HTML using globalEval

Utilizing the CSS 'overflow: hidden' property and jQuery to restrict users from scrolling during a loading page

Unable to save or create files in Store.js

Tips for choosing the remaining items in a multiple selection process

Determine the minimum and maximum width of jQuery UI resizable during the "resizestart" event