如何在JavaScript滚动触发函数执行后停止该函数？

原代码的问题在于trigger变量是在滚动事件函数内部声明的，每次触发滚动事件时，这个变量都会被重新初始化为true——哪怕之前已经把它设为false，下次滚动时也会变回初始值，导致提示重复弹出。

下面提供两种可行的解决方案：

方案一：将触发状态变量移到全局作用域 #

把trigger变量放在滚动事件函数外部，这样它只会被初始化一次，触发提示后设置为false，后续滚动就不会再执行提示逻辑：

let trigger = true;
window.onscroll = function() {
  if (trigger && window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    trigger = false;
    alert('You finish reading!');
  }
};

方案二：触发后移除滚动事件监听 #

直接在触发提示后，移除滚动事件的监听函数，这样后续的滚动操作就不会再触发这个逻辑，性能更优：

function handleScroll() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    alert('You finish reading!');
    window.removeEventListener('scroll', handleScroll);
  }
}
window.addEventListener('scroll', handleScroll);

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