как продолжить функцию setinterval после ее очистки

#javascript

Вопрос:

Привет всем, я хочу знать, как продолжить функцию setsetinterval после ее очистки, начиная с последнего значения, например, я создал счетчик и очистил его до значения «10» как заставить его снова начать отсчет, начиная с последнего значения «10» это мой код

 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)
}`

1. Вы не можете. Вы должны установить новый интервал. Чтобы упростить это, не передавайте выражение анонимной функции setInterval . Вместо этого объявите функцию (или присвоите ее переменной) и передайте ссылку на эту функцию setInterval .

Ответ №1:

Попробуйте это

.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>

Вот ссылка на песочницу — https://codesandbox.io/s/floral-thunder-q4vmc?file=/index.html:115-182

Ответ №2:

Этот код странный, но вы можете просто снова это сделать:

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

И интервал должен работать снова, и я бы назвал эту функцию:

 counter = setInterval(nameOfFunction, 1000);

Ответ №3:

Установите переменную для управления setInterval тем, выполняется ли:

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

Ответ №4:

Чтобы продолжить обратный отсчет, просто вызовите setInterval снова:

 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>

Развернуть фрагмент

Приведенный выше подход не отслеживает частичные секунды. Например, повторное нажатие паузы / возобновления очень быстро предотвратит отображение того, что прошла одна секунда. Мы могли бы получить более точное представление о прошедшем времени, сохранив миллисекундную дельту:

 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>

Развернуть фрагмент