javascript阻止scroll事件多次执行的思路及实现

转载 2016年08月31日 11:27:09
//测试代码 
window.onscroll = function(){ 
    alert("haha"); 
} 

鼠标滑动之后一直点击提示框才可以,我想要的是鼠标滑动后只执行一次事件。

既然scroll事件是一个连续触发事件,那我设置一个延迟器,在用户滑动鼠标的时间后执行该函数 ,就可以只执行一次啦 。

//测试代码: 
function haha(){ 
    alert("haha"); 
} 
window.onscroll = function(){ 
setTimeout(haha,500); 
} 

结果发现还是和上面一样弹出很多的警告框
可见 scroll事件像队列一样排成一行 ,按顺序执行 ,所以此路不通。

那么就用条件控制事件执行方法

var tur = true; 
function haha(){
    alert("haha"); 
    tur = true; 
} 

window.onscroll = function(){ 
    if(tur){ 
        setTimeout(haha,1000); 
        tur = false; 
}else{ } 
}

鼠标滚动执行一次代码 ,问题是当再次滚动鼠标之后,事件再也不执行了。
原因就是条件被设置为false 所以后续的事件永远不执行了。

思路就是条件判断+延迟执行就可以解决这个问题。在事件执行之初,复活变量,事件执行完毕后杀死变量。

关于阻止scroll()事件多次执行的一个小方法

最近写一个小demo,需要用到scroll事件,可又不希望它多次执行,网上搜了挺多方法,有一个虽然有点小bug但也挺好用,贴出来与大家分享,直接上栗子: Document ...

原生js实现下拉到底事件(2)-解决为什么ie下的onscroll事件轮滚过快就执行了2次呢?

这个是原来的写法: var throldHold = 20; //两次scroll事件触发之间最小的事件间隔 window.onscroll = function(){ if(argum...

IE chrom浏览器下window.scroll事件触发多次

增加状态变量status=true  当滚动到某位置需执行某事件时  只有当status值为true才能执行这个事件  同时将status设为false并延时执行这个事件  事件执行完毕再将statu...

js监听页面的scroll事件,当移到底部时触发事件

//页面拉到底时自动加载更多 $(window).scroll(function(event){ var wScrollY = window.scrollY; // 当前滚动条位置 ...

jQuery scroll事件实现监控滚动条分页示例

这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可...

Scroll Indicator(javascript实现)

转载:http://www.w3cplus.com/css/pure-css-create-scroll-indicator.html Scroll Indicator称之为滚动指示器,是Web...

[Sencha Touch/ExtJS] (函数节流)阻止用户快速频繁点击,导致多次触发点击事件

一、前言以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 window对象的resize、scroll事件 拖拽时的mousemove事件 射击游...

解决在IE浏览器中resize事件执行多次

resize事件是在窗口或框架的大小被调整时发生,包括最小化、最大化。在IE和Opera浏览器中,只要窗口边框被拖动,就触发该事件,在Mozilla浏览器中,resize 事件只是在停止改变窗口大小时...

【Android】Android防止过快点击造成多次事件执行(防止按钮重复点击)

在用户使用 Android 应用的时候,经常会出现过快且多次点击同一按钮的情况,一方面这是因为应用或手机当前有些卡顿,另一方面也可能是由于很多应用并没有设置按钮点击时的 selector 或者其它...

在IE浏览器中resize事件执行多次的解决方法

最后我找到了一个jquery插件形式的解决方案;  /* =====================================================================...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript阻止scroll事件多次执行的思路及实现
举报原因:
原因补充:

(最多只允许输入30个字)