函数节流和防抖

一、函数节流(throttle)

函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。
规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。
1.如何实现
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环;

上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。

2.函数节流的应用场景
需要间隔一定时间触发回调来控制函数调用频率:

  • DOM 元素的拖拽功能实现(mousemove)
  • 搜索联想(keyup)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

二、函数防抖(debounce)

防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效
在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时
1.如何实现
其原理就第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器,然后延迟一定时间再执行。

上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。

2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调:

  • 每次 resize/scroll 触发统计事件
  • 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复