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

可以用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 });

原文地址:https://www.cnblogs.com/zhangnan15/p/12324591.html

时间: 2024-10-14 00:42:41

让$(window).scroll()监听事件只执行一次的相关文章

如何解决OnTouch监听事件只监听到DOWN操作,没有监听到MOVE和UP操作

解决方法其实很简单,只需要 把return false改成return true即可.

js scroll 滚动连续多次触发事件只执行一次

(function() { var finished = true; function loadData() { //xxxx finished = true; } dom.onscroll = function() { if(finished && this.scrollHeight - this.clientHeight == this.scrollTop) { finished = false; loadData(); } } })();

控制元素的点击执行事件只执行一次

if(e.handled !== true){ } e.handled=true; function(e) 完整例子: $('.shoucangtitlele').click(function(e){                if(e.handled !== true){                    var data = $(this).attr('data');                    alert(data);                    if(data

vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

1 // 开始这样写,不执行 2 window.onresize = function() { 3 console.log('窗口发生变化') 4 } 5 6 7 // 改成window监听事件 8 window.addEventListener('resize', function() { 9 console.log('窗口发生变化') 10 }) onresize的定义方式 一.直接在html中定义 如<body onresize="doResize()"/> 二.直接

ext Window点击右上角关闭(X按钮)添加监听事件

使用场景:关闭window的时候增加监听事件. 正确的使用方式: addwin = new Ext.Window({ title : '新增', closable : true, width : 500, autoHeight: true, border : false, plain : true, modal : true, layout : 'fit', bodyStyle : 'padding:5px;', maximizable : false,// 禁止最大化 closeAction

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

浅谈postMessage多页面监听事件

最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下面子级页面的动态,代码: window.parent.addEventListener('message',function(e){ if(e.source != window.parent) return; var names = localStorage.getItem("toName"

python hook监听事件

python hook监听事件 作者:vpoet 日期:夏季 # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ # import pythoncom import pyHook def onMouseEvent(event): # 监听鼠标事件 print "MessageName:",event.MessageName print "Message:", event.Message print "T

javascript事件有哪些?javascript的监听事件

1 事件类型: 2 1.界面事件 3 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload 4 window.onload = function(){ 5 //代表图片,dom元素,iframe,css加载完毕以后 6 //才触发的事件 7 } 8 $(function(){ 9 //dom css js 初始化就加载事件 10 //调用了图片的unload事件 11 }); 12 13 onunload:移除加载事件 14 onabort: