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综合应用实例简单的表格统计
Sep 03 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 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中explode函数和split函数的区别小结
2016/08/24 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
javascript中对对层的控制
2006/12/29 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python 绘图和可视化详细介绍
2017/02/11 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
学校对教师的评语
2014/04/28 职场文书
专家推荐信模板
2014/05/09 职场文书
2014年会策划方案
2014/05/11 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
二年级作文之动物作文
2019/11/13 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers