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 相关文章推荐
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
微信小程序实现日历效果
Dec 28 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
实例讲解React 组件生命周期
Jul 08 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
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP实现简单登录界面
2019/10/23 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
windows下python安装pip图文教程
2018/05/25 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python根据成绩分析系统浅析
2019/02/11 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
银行实习人员自我鉴定
2013/09/22 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
运动会100米解说词
2014/01/23 职场文书
安全生产管理责任书
2014/04/16 职场文书
运动会广播稿50字
2015/08/19 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
oracle重置序列从0开始递增1
2022/02/28 Oracle