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 相关文章推荐
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript常见用法总结
May 22 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
优良学风班总结材料
2014/02/08 职场文书
公司租房协议书范本
2014/10/08 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2014年教研组工作总结
2014/11/26 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
公司职员入党自传书
2015/06/26 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python