H5W3
当前位置:H5W3 > 问答 > 正文

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

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

[
{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方法,执行完清理掉。但是我感觉这种方法不方便,想咨询下各位有没有更好的解决方案。谢谢

回答

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

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


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

未经允许不得转载:H5W3 » js时间段内并行执行多个方法?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址