CODEWITHSUNDEEP
javascript
zohaib butt
zohaib butt

Reputation: 23

I'm having some problem with setInterval()

I want my stopwatch as if 60 seconds complete . There should be an increment in minute and seconds to start from 0 again . I tried so many ways to do so but it always stop working when time is one minute .. is it built in problem in setInterval()

async timer() {


  var timeout = setInterval(() => {
    count++
    this.timerSecond.innerText = count;
    if (count > 59) {
      count = 0;
      this.timerSecond.innerText = count;
      count1++
      this.timerMinute.innerText = count1

    }
  }, 100);
  console.log(timeout);

  return timeout;
}

Upvotes: -1

Views: 84

Answers (3)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2840

This is nice and simple:

var seconds = 0;
setInterval(function(){
	tick(document.getElementById("timer"), ++seconds);
}, 1000);

function tick(ele, secs){
	ele.innerHTML = Math.floor(secs / 60) + ":" + (secs % 60 < 10 ? "0" : "") + secs % 60;
}
<span id="timer">0:00</span>

Math.floor(secs / 60) gives us the minutes and excludes any remainder of seconds, secs % 60 gives us the remainder of seconds after we've divided by 60 (so it essentially removes the minutes), and (secs % 60 < 10 ? "0" : "") gives us a leading "0" if the seconds (excluding whole minutes) is less than 10.

Upvotes: 0

Patrick Roberts
Patrick Roberts

Reputation: 51957

Does this method work for you?

timer () {
  let seconds = 0;

  const tick = () => {
    this.timerText.textContent = seconds;
    this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0');
    this.timerMinute.textContent = Math.floor(seconds / 60);
    seconds++;
  };

  tick();
  return setInterval(tick, 1000);
}

It's hard to tell why you had two separate setInterval() calls, but I removed the one called every 100 milliseconds and combined the logic into a single one.

The timerSecond uses modulo 60 of seconds, and timerMinute uses result of integer division by 60, while the timerText just receives the seconds directly, as in your initial code.

The async keyword didn't add any value to your code, since none of it uses promises, so I removed it.

Here's a slightly elaborated example to demonstrate functionality:

class Stopwatch {
  timerText = document.querySelector('.text');
  timerSecond = document.querySelector('.second');
  timerMinute = document.querySelector('.minute');

  timer () {
    let seconds = 0;

    const tick = () => {
      this.timerText.textContent = seconds;
      this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0');
      this.timerMinute.textContent = Math.floor(seconds / 60);
      seconds++;
    };

    tick();
    return setInterval(tick, 1000);
  }
}

new Stopwatch().timer();
<div class="text"></div>
<div>
  <span class="minute"></span>:<span class="second"></span>
</div>

Upvotes: 0

mwilson
mwilson

Reputation: 12970

Here is a basic example of how to make a counter that counts down from 60 (or any other number) and display it on the page.

// Reference to html element that holds the count
const counterDiv = document.getElementById('counter');
// Variable that will keep track of the seconds to count down from
const secondsToCount = 60;
// Set the initial value of the counter to the secondsToCount variable.
// The counter will be updated each 1000ms | 1s and will be changed
// to the value of the remaining seconds to count down from
// which is why this variable is let opposed to const
let counter = secondsToCount;
// Set the initial text of the counter html element
counterDiv.innerHTML = secondsToCount;

// Function that is going to do counting for us.
const interval = setInterval( () => {
  // Decrement the current counter value by 1
  counter--;
  // Update the text to show the new value of our counter
  counterDiv.innerHTML = counter;
  // If the counter is === 0, the counter is finished. She some text.
  if (counter === 0) {
    // Clear the interval (otherwise, you'll continue to count
    // into the negative numbers
    clearInterval(interval);
    // Show the completed text
    counterDiv.innerHTML = `Done counting down from ${secondsToCount} seconds`;
  }

}, 1000); // 1000 ms | 1s
<!-- Element used to show the count -->
<div id="counter"></div>

Upvotes: 0

Related Questions