当 id 不断递增时,cancelAnimationFrame 是如何工作的?
How does cancelAnimationFrame work when the ids keeps incrementing?
背景:
当使用 setInterval 或 setTimeout 时,我们会收到一个用于 cancel/clear 操作的 ID。
setInterval/setTimeout:
const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() => {clearInterval(intervalId)}, 1000);
requestAnimationFrame:
使用 raf 时,对于步骤的每次迭代,我们都会重置 rafId,并且我们只在最新的 rafId 上调用 cancelAnimationFrame?
let rafId;
function step(timestamp) {
rafId = requestAnimationFrame(step);
console.log(timestamp, rafId)
if(timestamp >= 1000) {
cancelAnimationFrame(rafId);
}
}
rafId = requestAnimationFrame(step);
问题:
当 rafId
不断更新时,cancelAnimationFrame 如何知道关闭所有先前对 requestAnimationFrame 的调用?
我猜测 cancelAnimationFrame 会根据 frameId 工作并关闭它后面的所有内容。
如果那是真的,它如何与多个 requestAnimationFrames
一起工作(因为它们将共享一个 frameIds)
确实,requestAnimationFrame returns 的 id 不断增加 1 - 但这并不重要。要保留请求 'alive',您需要在回调中重新请求它。
让我们看看最后一次触发回调函数步骤时发生了什么:
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,现在我们正在请求一个新的 animationframe,它获得 id 51。这次虽然我们的 if-condition 为真,所以它取消了对 id 的请求51. id 50的请求已经调用完成,回调函数已经调用完毕,无需取消。
背景:
当使用 setInterval 或 setTimeout 时,我们会收到一个用于 cancel/clear 操作的 ID。
setInterval/setTimeout:
const timeoutId = setTimeout(() => {clearTimeout(timeoutId)}, 1000);
const intervalId = setInterval(() => {clearInterval(intervalId)}, 1000);
requestAnimationFrame: 使用 raf 时,对于步骤的每次迭代,我们都会重置 rafId,并且我们只在最新的 rafId 上调用 cancelAnimationFrame?
let rafId;
function step(timestamp) {
rafId = requestAnimationFrame(step);
console.log(timestamp, rafId)
if(timestamp >= 1000) {
cancelAnimationFrame(rafId);
}
}
rafId = requestAnimationFrame(step);
问题:
当 rafId
不断更新时,cancelAnimationFrame 如何知道关闭所有先前对 requestAnimationFrame 的调用?
我猜测 cancelAnimationFrame 会根据 frameId 工作并关闭它后面的所有内容。
如果那是真的,它如何与多个 requestAnimationFrames
一起工作(因为它们将共享一个 frameIds)
确实,requestAnimationFrame returns 的 id 不断增加 1 - 但这并不重要。要保留请求 'alive',您需要在回调中重新请求它。 让我们看看最后一次触发回调函数步骤时发生了什么:
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,现在我们正在请求一个新的 animationframe,它获得 id 51。这次虽然我们的 if-condition 为真,所以它取消了对 id 的请求51. id 50的请求已经调用完成,回调函数已经调用完毕,无需取消。