函数防抖与函数节流

总字数 773

预计阅读时间 3 分钟

函数防抖与函数节流都是应用在该函数绑定的事件(比如keyup scroll等)可能在短时间内被频繁调用的情况
应用后可以有效提升性能, 从而优化页面流畅度

防抖（debounce）

在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时

比如事件在9:00被触发, 设定在10秒后执行回调函数
之后在9:03的时候该事件再次被触发, 那么回调函数将会在9:13执行(原本会在9:10执行的回调函数不会执行)
如果在此期间事件再次被触发, 则回调函数执行事件继续向后推移

代码模拟实现

(function(){
function callback(content) {
  console.log('这里是需要执行的回调函数' + content)
}
function debounce(fun, delay) {
  return function(){
    //获取函数的作用域和形参
    let that = this
    let args = arguments
    clearTimeout(fun.id)// 清除定时器
    fun.id = setTimeout(function () {
      fun.apply(that, args)
    }, delay)
  }
}
// 这里设定的函数防抖时间为1s
let debounceAjax = debounce(callback, 1000)
document.getElementById('test-input').addEventListener('keyup', function (e) {
  debounceAjax(e.target.value)
})
})()

实际的效果就是在输入框当中输入内容, 当输入动作停止1秒后才会执行callback
而不是输入一个字符就执行一次

原理

防抖是创建一个定时器，规定在delay时间后触发函数
但是在delay时间内再次触发的话，都会清除当前的定时器重新计时。这样一来，只有最后一次操作事件才被真正触发。

节流（throttle）

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

比如事件在9:00被触发, 设定时间单位是10秒
之后在9:03的时候该事件再次被触发, 那么本次触发就是无效的
在9:00~9:10期间事件再次被触发, 均是无效的

代码模拟实现

(function(){
function callback(content) {
  console.log('这里是需要执行的回调函数' + content)
}
function throttle(fn, delay) {
  let lastTime
  let timer
  delay = delay || 300 // 默认间隔为300ms
  return function() {
    let context = this
    let args = arguments
    let nowTime = +new Date()// 获取系统当前时间戳
    if (lastTime && nowTime < lastTime + delay) { // 当前距离上次执行的时间小于设置的时间间隔
      clearTimeout(timer)// 清除定时器
      timer = setTimeout(function() { // delay时间后，执行函数
        lastTime = nowTime
        fn.apply(context, args)
      }, delay)
    } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行并且记录本次执行的时间戳
      lastTime = nowTime
      fn.apply(context, args)
    }
  };
}
let throttleAjax = throttle(callback, 1000)
document.getElementById('test-input2').addEventListener('keyup', function (e) {
  throttleAjax(e.target.value)
})
})()

应用场景举例

节流: 提交按钮的防重点
防抖: input框对输入内容的自动联想