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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery插件开发全解析
Oct 10 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php汉字转拼音的示例
2014/02/27 PHP
php常用的url处理函数总结
2014/11/19 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
Python实现截屏的函数
2015/07/25 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Pytorch 实现权重初始化
2019/12/31 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python访问hdfs的操作
2020/06/06 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
求职者应聘的自我评价
2013/10/16 职场文书
教师实习自我鉴定
2013/12/11 职场文书
校园环保建议书
2014/05/14 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers