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 面向对象(三)接口代码
May 23 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
详解jQuery-each()方法
Mar 13 jQuery
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
实现vuex原理的示例
Oct 21 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
Admin generator, filters and I18n
2011/10/06 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
详解Python中的日志模块logging
2015/06/19 Python
python实现贪吃蛇游戏
2020/03/21 Python
python绘制玫瑰的实现代码
2020/03/02 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
调解协议书范本
2016/03/21 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
德劲DE1102数字调谐收音机机评
2022/04/07 无线电