让$(window).scroll()监听事件只执行一次

Posted 2021-03-08 zhangnan15

可以用jQuery中的unbind()来进行事件解绑。

1 $(window).scroll(function() {
2     console.log("滚离顶部" + $(document).scrollTop());
3 
4     //...
5 
6     //对window对象进行scroll事件解绑
7     $(window).unbind("scroll");
8 });

 

方法的参数如下（截图于w3school）：

 

额外：

我在一次将scroll()和setInterval()结合起来用时，出现了“貌似unbind()不太奏效”的情况：scroll事件被触发多次。仔细看了看，发现其实不是unbind()的问题，是代码结构的问题，我不该一股脑地连scroll()都放进setInterval()里，导致浏览器不断添加一模一样的监听事件（这是什么机制呢？）——它们居然每50毫秒增多一个（都处于待命状态），然后一并被触发。（所以不是unbind()起不了作用。。也与鼠标滚轮“每滚一小牙，触发事件次数不止一次”这个特点无关）

错误代码：

1 var i =setInterval(function(){
2 
3     //...
4 
5     $(window).scroll(function(){
6         clearInterval(i);
7         $(window).unbind("scroll");
8     });
9 },50);

正确代码：

1 var i =setInterval(function(){
2 
3     //...
4 
5 },50);
6 $(window).scroll(function(){
7     clearInterval(i);
8     $(window).unbind("scroll");
9 });