在动画循环Javascript中启动函数ONCE

Question

function sayHello () {
consile.log('hello')
}
animate () {
sayHello();
Window.requestAnimationFrame(animate);
}
animate();

有没有办法让这个sayHello函数只启动一次？也许使用异步等待？或者可能是我一无所知的另一种方式。我很想学习！

天真的解决方案：

我一直在做的是制作某种全局标志变量。

let saidHello = false;
animate () {
if(saidHello === false) {
sayHello();
saidHello = true;
}

Window.requestAnimationFrame(animate);
}

这很有效，但看起来很混乱，有时很难遵循。也许有一种在动画循环中触发一个函数一次的最佳实践？

Answer 1

您可以定义一个助手once来包装您的sayHello。高阶函数将函数作为自变量，并返回一个只运行一次的新函数

const once = fn => {
let called = false, result;
return (...args) => called ? result : (called = true, result = fn(...args));
};
const sayHello = once(() => {
console.log('hello');
});
function animate() {
sayHello();
window.requestAnimationFrame(animate);
}
animate();

使用if而不是三元运算符?:的版本

function once(fn) {
let called = false, result;
return (...args) => {
if (!called) {
result = fn(...args)
called = true
}
return result
}
}

Answer 2

如果在开始动画之前调用它会怎样？？？

function sayHello() {
console.log('hello')
}
function animate () {
window.requestAnimationFrame(animate);
}
sayHello();
animate();

Answer 3

只需定义一些布尔值来检测函数是否已使用isFired变量执行，如下所示：

let isFired = false;
function sayHello () {
if(isFired) return;
isFired = true;

console.log('hello')
}
function animate () {
sayHello();
window.requestAnimationFrame(animate);
}
animate();