由于 Web Worker
本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker
中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适。例如:只要微秒是质数,就渲染某些东西。要访问微秒,你可以使用 performance.now
。
优点
Web Workers
的消息传递设计,从UI线程角度完全异步。setInterval
不同,调用 worker.terminate
保证不会再收到任何消息。引用MDN:“
Worker
的Terminate()
方法立即终止Worker
。它不会为等待Worker
完成里面执行的程序,而是会立即停止。”
缺点
Worker
中做出决定那样及时渲染。Web Worker
支持。如果创建带有无限动画的 div
。你可以订阅其 animationiteration
事件,并在事件 animation-duration
回调时得到通知。
优点
DOM
中删除隐藏的 div
时,将自动进行清理。例如,如果你有一个可渲染时间的 React
组件,则无需在卸载时做任何事情。该 div
将被删除,该事件将不再触发。.addEventListener("animationiteration", fun)
。animation-delay
。缺点
DOM
和 CSSOM
。其他CSS规则可能会干扰你的规则。这就是为什么我建议创建一个像这样的任意不存在的标记的原因 <just-a-timer-element></<just-a-timer-element>
。也许用CSS动画代码整齐地放入其中创建自定义元素?。display: none;
属性,则无效。<svg>
<rect>
<animate
attributeName="rx"
values="0;1"
dur="1s"
repeatCount="indefinite"
/>
</rect>
</svg>
如果这样调用:animate.addEventListener('repeat', fun)
,你的函数将每秒被调用一次。
优点
SVG
为 display: none;
也会生效。DOM
中删除 SVG
时自动停止。缺点
DOM
和 CSSOM
。与上述相同的警告。其他CSS规则可能会干扰你的配置。IE
和 Edge
(在 Chromium
之前)不受支持。Web Animations API
允许你在 JavaScript
中为 DOM
元素设置动画。
有趣的是,你可以使未渲染完的元素具有动画效果!这使你能够访问纯 JS
(和 Web api
)中的定时机制。
这是替代 setTimeout
的实现:
function ownSetTimeout(callback, duration) {
const div = document.createElement('div');
const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });
const animation = new Animation(
keyframes,
document.timeline
);
animation.play();
animation.addEventListener('finish', () => {
callback();
});
}
很整洁,不是吗?
优点
缺点
Chromium
。setTimeout
的替代品可能会很糟糕。onfinish
活动可用。±5ms
。