Question 228425 in Javascript Question posted in
A very good W3school tutorial can be found here.

Is there a way to avoid multi clicking on an event in javascript

When I click on the button it just speeds up the timer. The more I click the faster it gets

playBtn.addEventListener('click', () => {
  if (timerStatus == "Stopped") {

    timerInterval = window.setInterval(stopWatch, 1000);
    document.getElementById('startstopBtn').innerHTML = ` <i class="fa-solid fa-play" id="play"></i>`
    timerStatus = "Stopped"

  }

I tried to make it happen only once.

Tags:

3

Answers


  1. 0

    use the anyone method to solve

    event.preventDefault()

    or

    jQuery.one()

    or

    event.timeStamp
    Login or Signup to reply.
  2. 0

    It seems like you want to speed up the timer every time the button is clicked. To achieve this, you need to decrease the interval between each tick of the timer, effectively making it tick faster. The current implementation you’ve shown doesn’t accurately reflect this behavior.

    // Initialize variables
let timerInterval;
let interval = 1000; // Initial interval (1 second)
let timerStatus = "Stopped";

// Function to update the timer display
function updateTimerDisplay() {
  // Update the display with the current interval and status
  document.getElementById('timerDisplay').textContent = `Interval: ${interval}ms, Status: ${timerStatus}`;
}

// Function to update the timer logic
function stopWatch() {
  // Logic to perform on each timer tick
  // This function might update your timer display, or perform other actions.
}

// Add event listener to the button
playBtn.addEventListener('click', () => {
  if (timerStatus == "Stopped") {
    // Start the timer with the current interval
    timerInterval = window.setInterval(stopWatch, interval);

    // Change button icon to indicate it's playing
    document.getElementById('playBtn').innerHTML = ` <i class="fa-solid fa-pause" id="pause"></i>`;

    // Update status
    timerStatus = "Playing";

  } else if (timerStatus == "Playing") {
    // If the timer is already playing, speed it up by decreasing the interval
    clearInterval(timerInterval); // Clear the current interval
    interval = interval * 0.8; // Decrease the interval (increase speed by 20%)
    timerInterval = window.setInterval(stopWatch, interval); // Set a new interval

    // Update status
    updateTimerDisplay();
  }
});

// Initial timer display
updateTimerDisplay();
    Login or Signup to reply.
  3. 0

    The timer is speeding up because you are calling new intervals again and again when you are clicking the button and each of them is calling with its own interval. It is like starting timers on multiple clocks one after another.

    Like @Barmar mentioned, the solution is to clear the interval on each new click if it already exists. I see that you are creating a new reset button to do this, which is not necessary.

    For it to work as expected, you need to do something like this:

    const playBtn = document.querySelector('button');

function stopWatch() {
    console.log('clicked');
}

const handleClick = (() => {
    let timerInterval;
  return () => {
    if(timerInterval) return;
    timerInterval = window.setInterval(stopWatch, 1000);
  }
})();

playBtn.addEventListener('click', handleClick);
    <html>
  <head>
  
  </head>
  <body>
  
    <button>
    play
    </button>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search