Comment le code peut-il détecter s'il est exécuté à l'intérieur d'un cadre d'animation ?

Question

Si une fonction est passée dans requestAnimationFrame() comment cette fonction peut-elle détecter qu'elle est appelée à l'intérieur d'un cadre d'animation ?

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

Les deux dernières lignes ne doivent pas être modifiées. J'aimerais savoir si je peux détecter la situation sans demander à l'utilisateur de se souvenir d'utiliser la fonction de deux manières différentes. L'utilisateur final devrait simplement utiliser la fonction comme d'habitude, sans savoir que ma fonction détecte le cas d'utilisation.

Answer 1

Il n'est actuellement pas possible d'obtenir le contexte du code appelant en Javascript, donc vous ne pouvez pas faire ce que vous voulez à moins de modifier requestAnimationFrame() mais heureusement, vous pouvez le faire. Essayez ceci...

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

Je mets ma propre réponse ici pour référence (merci @phuzi, @Archer, et @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

Vous pourriez bind votre fonction que vous passez à 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."

Véase Function.prototype.bind pour plus de détails sur son fonctionnement.

UPDATE

En regardant les documents pour window.requestAnimationFrame le callback, c'est-à-dire someFunction sera appelé avec un DOMHighResTimeStamp qui est .

someFunction pourrait le détecter avec

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

Malheureusement, il n'y a aucune garantie que quiconque utilise someFunction ne l'appelle pas en passant une valeur.