javascript - 在 jQuery 中在窗口滚动上运行一次函数

Question

我正在创建我的作品集，并试图在进入“我的技能”部分时加载我的技能栏。我希望他们只执行一次，无论是当有人滚动到此部分或直接从导航转到此部分时。这是我的代码:

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 时，它不起作用，当我使用 one 在窗口上创建另一个函数时，它不起作用> 在我的 if 语句中。我也尝试使用 return 或 return false 退出函数，在这里，在堆栈溢出时，我发现了一些关于 flag 的信息，我并不完全理解，但我尝试了不同的方法与它的组合。有人可以帮我吗？我已经看到有一个用于此类效果的库，但是仅仅为了一件事而安装任何库是没有意义的......

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

Answer 1

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

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");
  }
});