如何让jQuery的scroll()滚动事件内绑定的函数仅执行一次

你当前的代码中使用scroll()方法持续绑定滚动事件，每次滚动触发都会执行内部逻辑，以下是几种让逻辑仅执行一次的实现方式：

方法1：使用jQuery内置的one()方法绑定事件（最简便） #

one()方法绑定的事件处理函数只会被触发一次，直接替换原来的scroll()绑定即可：

$(document).ready(function(){
  // 用one代替scroll绑定事件，仅触发一次
  $(window).one('scroll', function(){
    // 注意原代码此处漏了$符号，需要补上
    $('.bar').each(function(){
      //some code
    });
  });
});

方法2：添加执行状态标志位控制（可灵活复用） #

如果后续有需要重新触发该逻辑的场景，可以通过自定义变量控制执行状态：

$(document).ready(function(){
  // 初始化执行状态为未执行
  let barLogicExecuted = false;
  $(window).scroll(function(){
    // 仅未执行过的时候才运行逻辑
    if (!barLogicExecuted) {
      $('.bar').each(function(){
        //some code
      });
      // 执行完成后修改状态，后续滚动不再触发
      barLogicExecuted = true;
    }
  });
});

方法3：逻辑执行完成后解绑滚动事件 #

执行完目标逻辑后直接移除当前的滚动事件监听，避免后续触发：

$(document).ready(function(){
  // 先给事件处理函数命名，方便后续解绑
  function handleScroll() {
    $('.bar').each(function(){
      //some code
    });
    // 执行完成后解绑自身的滚动事件
    $(window).off('scroll', handleScroll);
  }
  $(window).scroll(handleScroll);
});

内容的提问来源于stack exchange，提问作者Nixit Ahir