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 锁定弹出层实现代码
Feb 23 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
vue watch监控对象的简单方法示例
Jan 07 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中的 == 运算符进行字符串比较
2006/11/26 PHP
php中explode与split的区别介绍
2012/10/03 PHP
两款万能的php分页类
2015/11/12 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue实现文字加密功能
2019/09/27 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
群众路线对照检查材料
2014/09/22 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
趣味运动会加油词
2015/07/18 职场文书
教你用python控制安卓手机
2021/05/13 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
Django基础CBV装饰器和中间件
2022/03/22 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL