js时间段内并行执行多个方法？

Question

我想实现的效果如下：
我有一个数组，数组内每个对象都有一个动画的起始时间和动画的执行时长。
在动画最开始的时候，会有一个总的计时时间，当当前计时满足数组内的动画起始时间的时候，数组的动画（某个方法）执行。
数组对象类似于:

[
    {start:2,duration:1,call:function(){}},//当计时到 2 秒的时候，执行一个动画（call），执行动画时间为 1 秒。
    {start:5,duration:3,call:function(){}},//当计时到 5 秒的时候，执行一个动画（call），执行动画时间为 3 秒。
    {start:7,duration:4,call:function(){}},//当计时到 7 秒的时候，执行一个动画（call），执行动画时间为 4 秒。
    {start:4,duration:10,call:function(){}}//当计时到 4 秒的时候，执行一个动画（call），执行动画时间为 10 秒。
]

动画最开始，开始计时，然后分别按规则执行数组对象内的方法。
类似于Flash时间轴的动画。

我想问一下，有没有类似的封装的比较好的插件，来处理这种setTimeout方法。

我现在能想到的实现就是每个对象都单独执行一个setTimeout方法，执行完清理掉。但是我感觉这种方法不方便，想咨询下各位有没有更好的解决方案。谢谢

Answer 1

动画就用专门的动画库来搞啦！
比如animejs这种。

---

同时调度多个对象，也无需用到并行这么高大上的概念，只要合理的任务调度就可以了，毕竟对 CPU 主核而言，所谓“并行”无非是对运算资源的调度，JS 作为一门图灵完备的语言，模拟这种任务调度自然不在话下。

---

追加一个使用 raf 实现的调度器：

const scheduler = (() => {
    const taskQueue = [];
    const { now } = Date;
    const { abs } = Math;
    const PRECISION = 16;  // 计时器精度
    let frame = null;
    
    const raf = () => {
        frame = requestAnimationFrame(() => {
            const moment = now();
            const markAsDelete = [];
            for(let index in taskQueue){
                const [task, time] = taskQueue[index];
                
                // 需要根据实际需求确定合适的回调执行条件
                if(abs(time - moment) < PRECISION){
                    task();
                    markAsDelete.push(index);
                }
            }
            
            // 删除执行过的任务
            markAsDelete.reverse().forEach(item => {
                taskQueue.splice(item, 1);
            });
            
            // 递归执行调度
            if(!!taskQueue.length){
                raf();   
            } else {
                frame = null;
            }
        });
    }
    
    // 启动调度
    raf();
    
    return {
        // 这里采用的是类似 setTimeout 的接口设计，
        // 但实际应用中可以采用其他形式的接口，配合
        // raf 中的判断条件，可以形成更加丰富的调度
        // 方案，比如注册速度来达到对速度的控制等
        register(task, timeout){
            const moment = now();
            taskQueue.push([task, timeout + moment]);
            if(frame === null){
                raf();
            }
            return this;
        }
    }
})();

根据你的需求可以这样写：

// 每个任务需要用一个函数启动、一个函数停止
const taskArray = [
    {
        start: 2,
        duration: 4,
        startFn: () => {},
        stopFn: () => {}
    }
    // ...
];
taskArray.forEach(item => {
    const {start, duration, startFn, stopFn} = item;
    scheduler.register(startFn, start * 1000)
    .register(stopFn, (start + duration) * 1000);
});

但看起来和用 setTimeout 也差不多。。。

Answer 2

实际来讲，比较好的做法不是用 setTimeout 应该用 window.requestAnimationFrame
参考 MDN 的文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

Answer 3

一般做动画会有一个统一的计时器，这个计时器的执行速度跟帧率对应。

我觉得你可以用 setInterval() 设置一个固定的检查频率，然后对每个不同频率的对象，采用计数器来判断是否需要进行检查。比如，A、B、C 三个对象的检查时间分别是 200、500、1000 毫秒，setInterval 用 100 的频率进行检查，那么，ABC 三个计数器分别计满 2、5、10 之后触发对应的事件，并将自己的计数器清零。

因为使用统一的计时器，就算长时间之后产生时间误差，但是各对象的动作基本上还是会对齐的。