JavaScript 函数运行后如何停止它答案

【问题标题】：How do I stop a JavaScript function once it runsJavaScript 函数运行后如何停止它
【发布时间】：2022-10-07 18:58:56
【问题描述】：

功能是当用户读完文章（向下滚动）时，会弹出提示“你读完了！”

但是当功能被触发时如何禁用该功能呢？否则用户再次向下滚动，警报将再次弹出...

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

您应该使用IntersectionObserver 而不是在onscroll 上安装阻塞事件处理程序并检查window/document 成员。
移动第一个let trigger = true外部事件处理程序 - 每次事件发生时您都会重置标志
我还会回应 @Dai 的 cmets 关于您在此处使用的方法，并补充说可以删除 else 语句。

标签： javascript disable

【解决方案1】：

只需将onscroll 设置为null

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

【讨论】：

【解决方案2】：

简短的回答是将trigger 标志移到事件处理程序之外。

否则，您可以通过以下方式改进此 sn-p：

使用intersection observer 更有效地检测滚动到底部
否则，您应该限制事件处理程序，因为它现在触发的次数超出了必要的范围，可能会导致用户体验不佳。
最好window.addEventListener("scroll", () => {}) 监听scroll 事件，因为onscroll 属性可以被任何人覆盖。

【讨论】：

【解决方案3】：

可以添加once: true的定义来达到想要的效果

 window.addEventListener('scroll', function() {

  let trigger = true;
  
  if (trigger && window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    trigger = false;
    alert('You finish reading!');
  } else {
    return null;
  }
}, { once: true });

【讨论】：