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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
浅谈Angular路由复用策略
2017/10/04 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
ReactRouter的实现方法
2021/01/25 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
怎样声明一个匿名的内部类
2016/06/01 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
环保建议书作文
2014/03/12 职场文书
普通党员个人整改措施
2014/10/27 职场文书
万能检讨书
2015/01/27 职场文书
六一儿童节新闻稿
2015/07/17 职场文书