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自动闭合html标签(自动补全html标记)
Oct 04 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
微信小程序之左右布局的实现代码
Dec 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
Protoss魔法科技
2020/03/14 星际争霸
PHP测试程序运行时间的类
2012/02/05 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
浅谈python中set使用
2016/06/30 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
简述 Python 的类和对象
2020/08/21 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
现场施工员岗位职责
2015/04/11 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL