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

Question

我陷入了一些我似乎无法弄清楚的事情中。我正在尝试使用多个

setTimeout

来暂停和恢复动画，因为从代码中可以清楚地看出，但这对我不起作用。我从以下位置获取了代码： javascript: 暂停 setTimeout(); 我根据我的程序编辑了代码，但它似乎不起作用。它只是从第一个状态开始动画，例如我在

var gT=setTimeout

处暂停，但它从

var yT=setTimeout

开始 我的代码如下所示：

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

需要单独声明并设置剩余和启动。

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();

如果您需要使用更高级的暂停/恢复版本，这就是 链接。这会像我们手动那样在运行时单独创建每个计时器。

Answer 2

广义上

可以使用 SuperTimeout-JS 来实现高级计时器控制，这可能是创建和处理可暂停计时器的最简单、最简洁、最干净的方法。此外，它还具有一个属性，可以让您获得暂停时的剩余时间。您还可以通过调用其全局暂停/取消暂停函数，仅用一行代码来暂停/取消暂停多个计时器。

参见

可暂停超时的现场演示。

参见

可暂停间隔的现场演示。

介绍基础知识的

短视频。

强烈建议阅读

自述文件。