代码如何检测是否在动画帧内运行？

Question

如果将某个函数传递给requestAnimationFrame()，该函数如何检测到它是在动画帧内被调用的？

f.e.

function someFunction() {
  if (/* What goes here? */) {
    console.log('Inside animation frame.')
  }
  else {
    console.log('Not inside animation frame.')
  }
}

// The following lines should not be modified for the answer.
someFunction() // logs "Not inside animation frame."
requestAnimationFrame(someFunction) // eventually logs "Inside animation frame."

最后两行不应修改。我很想知道我是否可以在不需要用户记住以两种不同方式使用该功能的情况下检测这种情况。最终用户应该像平常一样使用函数，而不知道我的函数检测到了用例。

Answer 1

目前无法在 Javascript 中获取调用代码的上下文，因此除非您更改 requestAnimationFrame()，否则您无法做您想做的事情，但幸运的是您可以做到这一点。试试这个...

// save a reference to the existing method and then override it...
window._requestAnimationFrame = window.requestAnimationFrame;
window.requestAnimationFrame = function(callback) {
	return window._requestAnimationFrame(function() {
		callback(true);
	});
}

function someFunction() {
	if (arguments.length && arguments[0]) {
		console.log('Inside animation frame.')
	}
	else {
		console.log('Not inside animation frame.')
	}
}

someFunction();
requestAnimationFrame(someFunction);

Answer 2

将我自己的答案放在这里以供参考（感谢@phuzi、@Archer 和@spender）：

// save a reference to the existing method and then override it...
window.requestAnimationFrame = function (raf) { return function(callback) {
  return raf(function(time) {
    callback(time, true);
  });
}}(window.requestAnimationFrame.bind(window))

function someFunction(time, inFrame = false) {
  if (inFrame) {
    console.log('Inside animation frame.')
  }
  else {
    console.log('Not inside animation frame.')
  }
}

someFunction(); // logs "Not inside animation frame."
someFunction(63245); // still logs "Not inside animation frame."
requestAnimationFrame(someFunction); // eventually logs "Inside animation frame."

Answer 3

您可以将bind 传递给requestAnimationFrame 的函数。

function someFunction(isInsideAnimationFrame, domHighResTimestamp) {
  if (isInsideAnimationFrame) {
    console.log('Inside animation frame.')
  }
  else {
    console.log('Not inside animation frame.')
  }
}

someFunction() // logs "Not inside animation frame."

requestAnimationFrame(someFunction.bind(null, true)) // eventually logs "Inside animation frame."

有关其工作原理的详细信息，请参阅Function.prototype.bind。

更新

查看window.requestAnimationFrame 的文档，回调即someFunction 将使用DOMHighResTimeStamp 调用。

someFunction 可以检测到这一点

function someFunction(domHighResTimestamp) {
  if (domHighResTimestamp) {
    console.log('Inside animation frame.')
  }
  else {
    console.log('Not inside animation frame.')
  }
}

不幸的是，无法保证使用someFunction 的人不会称其为传递值。