在jQuery中运行窗口滚动一次的函数答案

【问题标题】：Running function on window scroll once in jQuery在jQuery中运行窗口滚动一次的函数
【发布时间】：2017-01-18 05:05:14
【问题描述】：

我正在创建我的作品集，并尝试在转到“我的技能”部分时加载我的技能栏。我希望他们只做一次，当有人滚动到这个部分或者直接从导航转到它时。这是我的代码：

var skills = $('#mySkills');
  var skillsPositionTop = skills.position().top;
 $(window).on("resize scroll", function (){
      if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80){
    console.log ("here is my loading script");

} });

当我使用one 而不是on 时它不起作用，当我在if 语句中使用one 在窗口上创建另一个函数时它不起作用。我也尝试使用return 或return false 退出函数，在这里，在堆栈溢出时，我发现了一些关于标志的信息，我并不完全理解，但我尝试了不同的组合。有人可以帮我吗？我已经看到有一个用于这种类型效果的库，但安装任何一个都没有意义......

编辑。 Console.log 代表我的加载代码。

【问题讨论】：

是否要求最多调用一次console.log("here is my loading script");？
这段代码很长，所以我没有在这里复制它，而是使用这个console.log来显示它作为示例

标签： javascript jquery scroll window

【解决方案1】：

您可以在.on() 为resize、scroll 事件设置命名空间，在if 语句中使用.off() 来删除命名空间事件。

var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize.once scroll.once", function (){
  if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80) {
    $(this).off("resize.once").off("scroll.once");
    console.log ("here is my loading script");
  }
});

【讨论】：

@Sara 注意，.off() 调用可以调整为.off(".once")