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 21 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JS作用域深度解析
Dec 29 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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 header()函数使用说明
2008/07/10 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python模拟随机游走图形效果示例
2018/02/06 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python如何读取、写入JSON数据
2020/07/28 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
竞选村长演讲稿
2014/04/28 职场文书
启动仪式策划方案
2014/06/14 职场文书
2014年财政所工作总结
2014/11/22 职场文书
董事长岗位职责
2015/02/13 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python