CODEWITHSUNDEEP
javascript
Saad Hesham
Saad Hesham

Reputation: 95

how to continue setinterval function after clearing it

Hello evreyone I want to know how to continue setsetinterval function after clearing it starting from the last value for example I created counter and i cleared it at the value "10" how to make it start counting again starting from the last value "10" this is my code

let
div = document.getElementById("test");
button = document.getElementById("btn");
let time =_ =>

    this.time = 0
    counter = setInterval(function()
                {
                    this.time = this.time+1;
                    div.innerHTML=this.time + "s"
                }
                ,1000);
    

time()
button.onclick = function()
{
    clearInterval(counter)
}`

Upvotes: 1

Views: 819

Answers (4)

Gershom Maes
Gershom Maes

Reputation: 8178

To continue the countdown, simply call setInterval again:

let t = document.querySelector('.time');
let b = document.querySelector('.control');

let state = 'paused';
let count = 0;
let interval = null;
b.addEventListener('click', () => {
  
  if (state === 'paused') {
    
    state = 'running';
    b.textContent = 'Pause';
    interval = setInterval(() => {
      count++;
      t.textContent = `${count}s`;
    }, 1000);
    
  } else {
    
    state = 'paused';
    b.textContent = 'Resume';
    clearInterval(interval);
    
  }
  
});
<div class="time">0</div>
<button class="control">Start</button>

The above approach does not track partial seconds. For example, clicking pause/resume repetitively, very quickly, will prevent the display from ever showing that a single second has passed. We could get a finer sense of time elapsed by storing a millisecond delta:

let t = document.querySelector('.time');
let b = document.querySelector('.control');

let state = 'paused';
let totalMs = 0;
let playMs = null;
let interval = null;
b.addEventListener('click', () => {
  
  if (state === 'paused') {
    
    state = 'running';
    b.textContent = 'Pause';
    playMs = +new Date(); // int defining start time
    
    let updateFn = () => {
      let ms = totalMs + (new Date() - playMs);
      t.textContent = `${Math.floor(ms * 0.001)}s`;
    };
    interval = setInterval(updateFn, 500);
    updateFn();
    
  } else {
    
    state = 'paused';
    b.textContent = 'Resume';
    totalMs += (new Date() - playMs);
    clearInterval(interval);
    
  }
  
});
<div class="time">0s</div>
<button class="control">Start</button>

Upvotes: 0

venkatesh pogartha
venkatesh pogartha

Reputation: 281

Try this

.js


let time = 0;
let counter = null;

let div = document.getElementById("test");
let button = document.getElementById("btn");
const startCounting = () => {
  counter = setInterval(() => {
    time += 1;
    div.innerHTML = time + "s";
  }, 100);
};

const startOrStop = () => {
  if (counter) {
    clearInterval(counter);
    counter = null;
  } else {
    startCounting();
  }
};

button.onclick = function () {
  startOrStop();
};

.html

    <div id="test"></div>
    <button id="btn">Start/Stop</button>

Here is the sandbox link - https://codesandbox.io/s/floral-thunder-q4vmc?file=/index.html:115-182

Upvotes: 1

Explosion
Explosion

Reputation: 326

Set a variable to control whether setInterval is going:

var intervalgoing = true;
setInterval(()=> {
    if (intervalgoing){
        // Do stuff here
    }
})
// Set "intervalgoing" to false to stop it.

Upvotes: 1

Wiktorkasa
Wiktorkasa

Reputation: 11

This code is weird but you can just again do it:

counter = setInterval(function()
                {
                    this.time = this.time+1;
                    div.innerHTML=this.time + "s"
                }
                ,1000);

And interval should work again and I would name this function:

counter = setInterval(nameOfFunction, 1000);

Upvotes: 1

Related Questions