How can code detect if running inside an animation frame?

问题

If some function is passed into requestAnimationFrame(), how can that function detect that it is being called inside an animation frame?

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."

The last two lines should not be modified. I am interested to know if I can detect the situation without requiring the user to remember to use the function two different ways. The end user should just use the function like normal, without knowing that my function detects the use case.

回答1:

You could bind your function that you pass to 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."

See Function.prototype.bind for details on how it works.

UPDATE

Looking at the docs for window.requestAnimationFrame the callback i.e. someFunction will be called with a DOMHighResTimeStamp which is .

someFunction could detect this with

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

Unfortunately there's no guarantee that whoever uses someFunction doesn't call it passing a value.

回答2:

It's not currently possible to get the context of the calling code in Javascript, so you can't do what you want unless you change requestAnimationFrame(), but thankfully you can do that. Try this...

// 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);

回答3:

Putting my own answer here for reference (thanks @phuzi, @Archer, and @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."

来源：https://stackoverflow.com/questions/40405696/how-can-code-detect-if-running-inside-an-animation-frame

标签

javascript

requestanimationframe