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


Posted in Javascript onNovember 08, 2013

写这个主要是为了解决一些常见网页特效在js解析时预期与效果不同。

原始代码 :

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

装在script标签内 鼠标滑动之后一直惦记 提示框才可以,所以很不方便 ,
而且 目的是鼠标滑动后 只执行一次事件,这个效果显然和实际不符合吧。

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

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

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

通过条件控制事件执行 ,这个是个不错的方法

function haha(){ 
alert("haha"); 
} 
var tur = true; //创建条件 
window.onscroll = function(){ 
if(tur){ setTimeout(haha,500); tur = false; } 
else 
{} 
}

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

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

var tur = true; 
function haha(){alert("haha"); tur = true; } window.onscroll = function(){ 
if(tur){ setTimeout(haha,1000); tur = false; 
}else{ } 
}
Javascript 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 #Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 #Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 #Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
VueRouter导航守卫用法详解
2017/12/25 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python使用wxPython实现计算器
2018/01/30 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
大学生入党思想汇报
2014/01/01 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
南湾猴岛导游词
2015/02/09 职场文书
家庭经济困难证明
2015/06/23 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python