由于 Web Worker 本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适。例如:只要微秒是质数,就渲染某些东西。要访问微秒,你可以使用 performance.now。
优点
引用MDN:“ Worker 的 Terminate() 方法立即终止 Worker。它不会为等待 Worker 完成里面执行的程序,而是会立即停止。”
缺点
如果创建带有无限动画的 div。你可以订阅其 animationiteration 事件,并在事件 animation-duration 回调时得到通知。
优点
缺点
<svg>
<rect>
<animate
attributeName="rx"
values="0;1"
dur="1s"
repeatCount="indefinite"
/>
</rect>
</svg>
如果这样调用:animate.addEventListener('repeat', fun),你的函数将每秒被调用一次。
优点
缺点
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();
});
}
很整洁,不是吗?
优点
缺点
先来回答一下下面这个问题:对于 setTimeout(function() { console.log(timeout) }, 1000) 这一行代码,你从哪里可以找到 setTimeout 的源代码(同样的问题还会是你从哪里可以看到 setInterval 的源代码)?
首先 了解下 setTimeout的浅层原理,setTimeout 是通过浏览器异步API执行,执行完成之后,回调交给宏任务,假设宏任务队列已经有其他任务,就会导致 setTimeout 回调执行延后,从而不精准
在JavaScript中,我们经常使用requestAnimationFrame、setTimeout、setInterval和setImmediate来控制代码的执行时机。它们各有特点和适用场景:requestAnimationFrame: requestAnimationFrame主要用于浏览器动画渲染。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!