如何恢复 JavaScript 中的设置超时？

Question

I am currently working on an animation where I had to use setTimeout to animate it.

Here is my html for the button "pause" which changes to resume on click:

<button type="button" id="pause">Pause</button>

Here is my JavaScript code where I am pausing the animation using the clearTimeout and clearInterval function of js.

document.getElementById("pause".addEventListener("click",function(){
    toggleText();
  clearTimeout(yT);
  clearTimeout(gT);
  clearTimeout(yTt);
  clearTimeout(rsT);
  clearInterval(sI);

I want to resume the animation from that very point where it was paused. I tried some functions suggested in other posts from Mr.Tim in this community but nothing is working out for me so far.

Answer 1

Kiran linked another question which is probably a good solution for you.

As mentioned, there's no built-in pauseTimeout function.

However, a simpler way would be to have an if statement within your setTimeout . Something like:

let timeoutPaused = false;

setTimeout(function(){
    if (!timeoutPaused) {
        doSomething();
    }
}, 1000)

function toggleTimeout() {
    timeoutPaused = !timeoutPaused;
}

Then you can just call toggleTimeout when you want to turn it off or on. Plus you don't even need that as a separate function really, I just put it like so for educational purposes.