javascript - 仅在未调用函数时调用函数/仅运行函数一次

Question

我animate_images在我的网站的某些页面上运行了一个执行特定动画的功能。

我遇到的问题是，当用户再次导航到同一页面时，除了已经运行的实例之外，还会第二次调用该函数。

有没有办法做这样的事情：

if ! (animate_images) {
  animate_images();
}

本质上，我想确保animate_images无论实际调用多少次，它都不会运行超过一次。

Answer 1

看看onceunderscore.js 中的函数 -链接在这里。

本质上，您将函数包装在另一个内部具有标志变量的函数中。如果标志未设置，则调用该函数，并在调用时设置标志。

_.once = function(func) {
  var ran = false, memo;
  return function() {
    if (ran) return memo;
    ran = true;
    memo = func.apply(this, arguments);
    func = null;
    return memo;
};

};

如果您不想在您的网站上添加下划线（我认为这是您在启动任何网站时应该做的第一件事，但我离题了），请执行以下操作：

runOnlyOnce = function(func) {...} // As defined above

animate_images = runOnlyOnce(animate_images);

或者

animate_images = runOnlyOnce(function(){
    alert('Animate all the things!');
});

函数本身不依赖于下划线的其余部分。

Answer 2

使用函数对象的静态属性，如在 booleananimate_images.isRunning中。在开始时animate_images，用类似的东西封装动画初始化

animate_images() {
    // on first load, animate_images.isRunning is undefined,
    //     so (!animate_images.isRunning) returns true.
    if(!animate_images.isRunning) { 
        /* launch animation */;
        // define animate_images.isRunning and assign true
        animate_images.isRunning = true;
    } else { 
        /* animation already initialized */ 
    }
}

Answer 3

执行后，您可以使用空函数覆盖您的函数：

function a(){
    console.log("hello");
    a = function(){};
}

a();  //"hello"
a();  //>>nothing happens<<

实际上，这只会覆盖对a您的函数的引用。因此，这仅在您不多次引用同一函数时才有效。如果你做这样的事情：

function a(){
    console.log("hello");
    a = function(){};
}

var obj { b:a };

a();  //"hello"
a();  //>>nothing happens<<
obj.b(); //"hello"

这种方法会失败。