函数防抖与节流
JS函数防抖与节流
先介绍概念,函数防抖
与节流
函数防抖
概念
某个函数在n秒后执行,假如在n秒之内又有事件被触发了,则重新开始计时。
例如:人进入电梯之后,电梯门从人进入到关上门再到开始上下运行中间花费的时间为10秒,假如在这10秒之内又有其他的人进入电梯了,那之前的时间计算就会被终止并重新开始计算。也就是在某段时间之内一个事件被触发多次,只有最后一次会被执行
适用场景:表单提交时假如用户疯狂的快速多次点击提交按钮时,使用函数防抖只会让最后一次的点击事件被触发,即:表单提交事件只执行一次。
代码如下:
1 | function debounce(fn, wait) { |
从以上代码来看,debounce函数返回了一个匿名函数(注意不能写成箭头函数),不能改变fn函数的上下文执行环境
,且使用了一个闭包将timer这个变量封存了起来。所以每次能进行清除及赋值操作。
函数节流
概念
函数节流就是相同时间间隔内某个事件只能执行依次。
例如:浏览器滚动条的滚动事件window.onscroll
这个函数。一旦滚动条发生了滚动之后,每隔几十毫秒就会触发一次。触发的频率越高要处理的操作就要重复执行多次,就会造成卡顿等现象。
解决办法:通过函数节流让浏览器滚动条的事件在触发之后,隔稍长的一段时间再去执行回调函数,降低事件的执行频率。
代码
1 | function throttle(fn, wait) { |