Question

我正在尝试让javascript函数只运行一次。我以前曾经问过这个问题，例如Function in javascript that can be called only once，但我无法在此处获得解决方案。我不确定是不是因为我有嵌套函数，或者是否有我遗漏的东西。本质上，我正在尝试运行一个功能，当滚动网页时，它： - 在标题的画布上运行一个小动画 - 减小标题的大小 - 留在那个

但是当有任何后续滚动时，动画会继续重新运行。以下是非工作代码的摘要版本：

$(document).on("scroll",function(){

    var arrange_title = function(){

        //some code 
    };

    if($(document).scrollTop()>0){ 
        arrange_title();
        arrange_title = function(){};
        setTimeout(function(){
            $("header").removeClass("large").addClass("small");
        },1000);
    }
});

我还尝试声明一个全局变量，在“window.onload”函数中将其设置为“false”，然后在运行动画的if函数中将其设置为true（if函数仅在变量运行时运行是假的），但这也不会阻止它。想法？

Answer 1

不要用时间。这就是你遇到麻烦的原因。使用var在函数外部声明变量，这将使其成为全局变量。您的代码应该在对该变量的检查中。在第一次执行代码之前，但在检查内部，更改该变量，以便代码永远不会再运行。

Answer 2

你正在寻找的东西是listenToOnce的东西，听众一次开火，但永远不会。这可以修改为许多调用，但逻辑是这样的：

注册听众。
然后，一旦听众开火，将其移除。

请参阅.off

$(document).on("scroll",function(){

    var arrange_title = function(){
        //some code 
    };

    if($(document).scrollTop()>0){ 
        arrange_title();
        arrange_title = function(){};
        setTimeout(function(){
            $("header").removeClass("large").addClass("small");
            // $(document).off('scroll'); // or here
        },1000);
    }

    $(document).off('scroll'); // remove listener, you can place this in the setTimeout if you wish to make sure that the classes are added/removed
});

Answer 3

尝试避免使用setTimeout。几乎所有动画都可以观看结束。

function doHeaderAnimation() {
  return $('header').animate();
}

function makeHeaderSmall() {
  $("header").removeClass("large").addClass("small");
}

function handleScroll(event) {

  if ($(document).scrollTop() > 0) { 

    doHeaderAnimation().then(makeHeaderSmall);

    $(document).off("scroll", handleScroll);

  }

}

$(document).on("scroll", handleScroll);

停止运行多次的嵌套javascript函数

3 个答案: