如何在 JavaScript 中暂停和恢复多个 setTimeout？

Question

I am stuck into something which I can't seem to figure out. I am trying to pause and resume an animation using multiple setTimeout as it's clear from the code but it doesn't work for me.I took the code from: javascript: pause setTimeout(); I edited the code according to my program but it doesn't seem to work.It just starts the animation from the very first state for eg I paused at var gT=setTimeout but it starts from var yT=setTimeout My code looks like this:

var start, remaining;

    
    function pause() {
        window.clearTimeout(yT);
        window.clearTimeout(gT);
        remaining -= Date.now() - start;
    };

    function resume() {
        start = Date.now();
        window.clearTimeout(yT);
        window.clearTimeout(gT);
        yT = window.setTimeout(function(){
            all();
            loop();
        }, remaining);
        gT = window.setTimeout(function(){
            all();
            loop();
        }, remaining);


    };

pause();
resume();

Answer 1

You need to declare and set remaining and start separately.

var start_yT,start_gT, remaining_yT, remaining_gT;

    
    function pause() {
        window.clearTimeout(yT);
        window.clearTimeout(gT);
        remaining_yT -= Date.now() - start_yT;
        remaining_gT -= Date.now() - start_gT;
    };

    function resume() {
        start = Date.now();
        window.clearTimeout(yT);
        window.clearTimeout(gT);
        yT = window.setTimeout(function(){
            all();
            loop();
        }, remaining_yT);
        gT = window.setTimeout(function(){
            all();
            loop();
        }, remaining_gT);


    };

pause();
resume();

And if you need to do with more advance version of pause/resume, this is the link . This create each timer separately runtime as we did manually.