如何在页面底部停止双javascript触发器[重复]

Posted 2023-03-10

【中文标题】如何在页面底部停止双javascript触发器[重复]

【英文标题】：how to stop double javascript trigger at the bottm of the page [duplicate]

【发布时间】：2013-02-17 05:19:03

【问题描述】：

如何防止网页底部出现这种双重触发。

当您从底部到达 100px 时，您会看到警报消息，但当您到达底部时，您也会看到它，即使您点击网页底部，我也只想看到一次。

这是链接：

double triggering

还有代码：

 $(window).scroll(function()    
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
       alert("bottom!");
   
);

编辑：

问题是我在网站上添加了多个 div，但我没有固定数量的 div，所以我需要检查我是否已经到达页面底部。

【问题讨论】：

提问前先搜索，这里有同样的问题***.com/questions/3898130/…

【参考方案1】：

您可以设置一个标志来控制此行为：

var alerted = false;
$(window).scroll(function () 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
        if (!alerted) 
            alert("bottom!");
            alerted = true;
        
    
    else alerted = false;
);

http://jsfiddle.net/gWD66/1117/

【讨论】：

问题已被编辑

【参考方案2】：

一般的答案是在事件处理程序触发后简单地删除它。

不过，jQuery 可以通过其.one() 事件处理函数为您完成这项工作。

【讨论】：

在这个用例中使用.one 不起作用，因为通常需要多次调用滚动处理程序。

【参考方案3】：

试试这个：

 var beenOnBottom = false;
 $(window).scroll(function()   

   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
       if(!beenOnBottom)
       
           alert("bottom!");
           beenOnBottom = true;
       
   
);

如果你想在再次上升时显示消息，你可以在超过 100px 值时重置beenOnBottom 变量

【讨论】：

var beenOnBottom = false; 不应该在事件处理程序之外吗？否则，它将在每次滚动事件时重置。

问题已被编辑

@ethagnawl 你说得对。我改变了答案。