多次停止嵌套 javascript 函数运行

Question

我只尝试将 javascript 函数设为运行一次。我见过这个问题之前被问过，例如Function in javascript that can be called only once，但我无法使此处的解决方案起作用。我不确定是不是因为我有嵌套函数，还是我遗漏了什么。本质上，我正在尝试运行一个函数，当滚动网页时，它： - 运行header 中 canvas 的一个小动画 - 减小 header 的大小 - 就这样吧

但是当有任何后续滚动时，动画保持re-running。这是 non-working 代码的摘要版本：

$(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 函数运行ning 仅当变量为 false 时），但这也不会阻止它。想法？

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

尽量避免设置超时。几乎所有的动画都可以看完了

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 函数运行

stopping a nested javascript function running more than once

javascript

if-statement

onscroll

多次停止嵌套 javascript 函数 运行

stopping a nested javascript function running more than once

javascript

if-statement

onscroll

多次停止嵌套 javascript 函数运行