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 相关文章推荐
js函数排序的实例代码
Jul 01 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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 取得瑞年与平年的天数的代码
2009/08/10 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python函数返回多个值的示例方法
2013/12/04 Python
Python常用模块介绍
2014/11/21 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
后勤人员自我鉴定
2013/10/20 职场文书
学校评语大全
2014/05/06 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android