处理事件节流方法
2017-04-19 15:40
155 查看
一、setTimeout()
通过给setTimeout()设置一个合理的值,就能够在即时返馈与较高性能之间达成一个合理的折中。$(document).ready(function() { var timer = 0; $(window).scroll(function() { if (!timer) { timer = setTimeout(function() { checkScrollPosition(); timer = 0; }, 250); } }).trigger('scroll'); });
我 们 没 有 直 接 将 checkScrollPosition() 设 置 为 scroll 事 件 处 理 程 序 , 而 是 使 用JavaScript的setTimeout函数,延迟250毫秒再调用它。更重要的是,我们会在执行任何代码之前先检查当前运行的计时器。因为检查一个简单变量的值速度极快,所以对事件处理程序的大多数调用都几乎能够立即返回。而对checkScrollPosition()函数的调用只会在计时器结束时才会发生,通常每次都要等250毫秒。
二、计时器
根据被节流的操作的特点,以及与页面的典型交互方式,我们可以直接给页面创建一个计时器,而不是等事件开始时再创建。$(document).ready(function() { var scrolled = false; $(window).scroll(function() { scrolled = true; }); setInterval(function() { if (scrolled) { checkScrollPosition(); scrolled = false; } }, 250); checkScrollPosition(); });
与前面的节流代码不同,这个轮询式的方案会调用JavaScript的setInterval()函数,每250毫秒检查一次scrolled变量的状态。不管什么时候发生滚动事件, scrolled都会被设置为true,以确保在下一次轮询时调用checkScrollPosition()。
三、消除抖动
在频繁重复的事件发生期间限制处理次数的第三种技术叫消 除 抖动(debouncing)。这种技术是以电子开关重复发送信号必需的后处理技术命名的,可以确保在发生多个事件的情况下,最终只会有一个事件实际地起作用。var searchTimeout, searchDelay = 300; $('#title').on('keyup', function(event) { clearTimeout(searchTimeout); searchTimeout = setTimeout(function() { $ajaxForm.triggerHandler('submit');// 发送Ajax请求 }, searchDelay); }
前面的代码,我们需要scroll处理程序随着滚动的继续多次发挥作用。而在这里,我们希望keyup行为在输入完成后只发生一次。为此,我们在用户按下第一个键的时候设置一个JavaScript计时器,然后跟踪该计时器。随后的每一次击键动作都会重置该计时器,只有用户停止击键的时间超过预定的300毫秒后,才会触发submit处理程序并发送Ajax请求。
注:以上代码节选自《jQuery基础教程第4版》一书。
相关文章推荐
- 为服务器控件加入客户端事件处理的几种方法
- 为什么Windows那么多以On开头的方法?(关于对继承中事件处理的认识!)
- Java Swing 中三种事件处理方法之比较
- 提升MOSS Event Handler事件处理程序运行级别的方法
- 下面的示例演示如何使用传递到事件处理方法的 GridViewCommandEventArgs 对象确定引发事件的按钮的命令名。
- Henry的VB.NET之旅(十五)—动态事件处理方法
- Java Swing 中三种事件处理方法之比较
- Java Swing 中三种事件处理方法比较
- DataGrid处理Delete事件的方法要连着执行两次
- GridView控件常见问题及处理方法===1. 关于隐藏字段的处理:==2. 关于按钮列的事件:==3. 关于按钮的客户端提示:==4. 关于时间字段的格式化输出:==5. 关于绑定空记录:
- C#"焦点事件"中的Validating处理方法
- 增加在ClassWizard中没有罗列事件的处理方法
- C#"焦点事件"中的Validating处理方法
- 如何获得对窗体移动事件的处理的一个方法
- 使用handleEvent()方法,action()方法和mouseDown()方法处理事件的JAVA Application程序.
- 任意绑定自定义控件的指定事件的处理方法
- C#"焦点事件"中的Validating处理方法
- DataGrid鼠标事件处理 DataGrid鼠标事件方法
- 用JavaScript事件串连执行多个处理过程的方法
- 使用prototype.js的事件处理方法