Question

我在我的某些网站上运行了一个函数animate_images来执行某个动画。

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

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

if ! (animate_images) {
  animate_images();
}

基本上，我想确保animate_images永远不会运行多次，无论实际调用多少次。

Answer 1

查看underscore.js中的once函数 - linked here。

基本上，您将函数包装在另一个函数中，该函数中包含一个标志变量。如果未设置标志，则调用该函数，并在调用时设置标志。

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

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

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"

此方法将失败。

Answer 3

使用函数对象的静态属性，如布尔值animate_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 */ 
    }
}

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

3 个答案: