摘要:一概述为了提高页面性能,有时需要对高频率触发的事件进行防抖或者节流处理。强调一系列连续触发的事件。防抖的目的就是把,,构成的系列或者,构成的系列事件合并成一个,即只执行或者或者。节流一段时间内的事件,只处理一次,即只调用一次事件处理程序。
一、概述
为了提高页面性能,有时需要对高频率触发的事件(scrllo, resize, mousemove, touchmove)进行防抖(Debounce)或者节流(Throttle)处理。这两个概念很相似,但是他们是不同的概念:
1.1 防抖把一系列连续的事件,只处理一次,即只调用一次事件处理程序。强调一系列连续触发的事件。
1.2 一系列事件防抖中注意一个问题:什么是一系列事件?在指定时间间隔(距离上次触发的时间)内触发的相同类型事件视为一个系列的事件。
如:假如scroll事件分别在0,1,3,7,8时间触发了事件A,B,C,D,E。假如规定时间间隔为2,则A,B,C属于一个系列(D,C之间间隔为3);D,E属于一个系列。防抖的目的就是把A,B,C构成的系列(或者D,E构成的系列)事件合并成一个,即只执行A或者C(D或者E)。
一段时间内的事件,只处理一次,即只调用一次事件处理程序。强调一段时间内。
二、防抖的简单实现 2.1 V1根据上面的概念实现一个简单的代码V1:
var debounce = function(func, delay){ var timeHandle = null; return function(){ var context = this, args = arguments, later = function(){ func.apply(context, arguments); }; if(timeHandle) { clearTimeout(timeHandle); // 覆盖上次事件回调:清除上次未执行的回调,新建个回调执行定时器 } timeHandle = setTimeout(later, delay); } }
功能如:
事件处理程序在一系列事件触发后delay时间后执行。
根据概念实现各简单的V1:
var throttle = function(func, delay){ var previous = 0; return function(){ var context = this, args = arguments, curr = Date.now(); // 如果时间间隔超过delay时间,则执行回调 if(curr - previous >= delay){ previous = curr; // 更新previous func.apply(context, args); } console.log(curr) } }四、其他库中的debounce, throttle
具体实现可疑参考下其他库,毕竟使用的人多,也更合理。
underscoreJS
http://www.tuicool.com/articl...
http://web.jobbole.com/86158/
防抖DEMO:http://codepen.io/dcorb/pen/K...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83807.html
摘要:若时间差大于间隔时间,则立刻执行一次函数。不同点函数防抖,在一段连续操作结束后,处理回调,利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次,而函数节流侧重于一段时间内只执行一次。 原博客地址,欢迎star 函数防抖和节流 函数防抖和函数节流:优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover...
摘要:函数防抖和节流,都是控制事件触发频率的方法。封装一个函数,让持续触发的事件监听是我们封装的这个函数,将目标函数作为回调传进去,等待一段时间过后执行目标函数第二点实现了,再看第一点持续触发不执行。 曾经面试时候被问到过这个,年少的我一脸无知。。。 后来工作中遇到了一个场景:输入名称的同时去服务器校验名称是否重复,但发现之前的代码竟然都没做限制,输入一次发一次请求。简直忍不了,就在项目的u...
阅读 3110·2021-11-10 11:36
阅读 3116·2021-11-02 14:39
阅读 1686·2021-09-26 10:11
阅读 4834·2021-09-22 15:57
阅读 1662·2021-09-09 11:36
阅读 2035·2019-08-30 12:56
阅读 3467·2019-08-30 11:17
阅读 1677·2019-08-29 17:17