javascript - 当 id 不断增加时,cancelAnimationFrame 是如何工作的?
问题描述
背景:
使用 setInterval 或 setTimeout 时,我们会收到一个 Id 来取消/清除操作。
设置间隔/设置超时:
const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() => {clearInterval(intervalId)}, 1000);
requestAnimationFrame: 使用 raf 时,对于 step 的每一次迭代,我们都会重置 rafId,并且我们只在最新的 rafId 上调用 cancelAnimationFrame?
let rafId;
function step(timestamp) {
rafId = requestAnimationFrame(step);
console.log(timestamp, rafId)
if(timestamp >= 1000) {
cancelAnimationFrame(rafId);
}
}
rafId = requestAnimationFrame(step);
问题:
cancelAnimationFrame 如何知道在rafId
不断更新时关闭所有先前对 requestAnimationFrame 的调用?
我猜测 cancelAnimationFrame 使用 frameId 并关闭它后面的所有内容。
如果那是真的,它如何与多个一起工作requestAnimationFrames
(因为它们将共享一个 frameIds)
解决方案
requestAnimationFrame 返回的 id 确实会不断增加一,但这并不重要。要保持请求“有效”,您需要在回调中重新请求它。让我们看看最后一次触发回调函数步骤时发生了什么:
function step(timestamp) {
console.log("before " + rafId);
rafId = requestAnimationFrame(step);
console.log("after " + rafId);
if (timestamp >= 1000) {
cancelAnimationFrame(rafId);
}
}
rafId = requestAnimationFrame(step);
如果您查看控制台中的最后两行,则类似于:
50岁之前
51岁以后
这意味着从上次回调返回的 id 是 50,现在我们正在请求一个新的动画帧,它获取 id 51。这一次虽然我们的 if 条件为真,所以它取消了对 id 51 的请求。 id 50 已经完成,因为回调函数被调用了,所以不需要取消它。
推荐阅读
- javascript - 你如何使用画布作为一个类?
- android - 为什么我的应用程序会自动注销?
- javascript - NodeJS Firebase App 在无效 JSON 上崩溃
- javascript - 如何动态更改 jsPlumb 中的 targetOption 和 sourceOption 锚点?
- spring-batch - Spring批量分区master可以读取数据库并将数据传递给workers吗?
- python - 如何使用 Spotify API Python 获取其他用户最近播放的歌曲
- wordpress - 如何添加块编辑器标题字数?
- ruby - 当孩子是文本节点时如何使用 Nori 访问属性值
- java - Oracle 应用程序中的 Libphonenumbers,缺少元数据:/com/google/i18n/phonenumbers/data/
- python - 无法使用 API 获取松弛的用户个人资料信息