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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JavaScript方法和技巧大全
Dec 27 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
施工材料员岗位职责
2014/02/12 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
公司委托书格式范文
2014/10/09 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL