前端防抖与节流

  函数防抖与节流印象中都是为了控制函数执行频率，比如避快速点击提交按钮多次提交、避免模糊搜索框keyup事件监听时快速打字每次都去调用一次查询接口、避免页面滚动监听事件快速执行影响性能等；之前对防抖和节流的具体概念缺乏了解，比如他们有啥区别？具体是怎么样的？如何方便的理解这两个概念？翻了翻资料，结合自己的理解与思考整理如下

防抖

名词解释

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

example1: 模糊搜索框keyup事件监听，始终要等到用户输入告一段落后才会执行数据查询
example2: 游戏释放技能有一个准备时间，当准备阶段被打断时，需要重新走技能准备，准备完成才能够释放技能

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * 防抖
 * @param fn      需要做防抖处理的函数
 * @param delay   技能准备（延迟）执行时间
 * @returns {Function}
 */
function debounce(fn, delay = 500) {
  let time = null
  return () => {
    clearTimeout(time)
    time = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}
// 只会打印debounce2
const debounceTest = debounce((param) => { console.log(param) })
debounceTest('debounce1')
debounceTest('debounce2')

节流

名词解释

高频事件触发，但在n秒内只会执行一次

example1：查询按钮，第一次可以立即点击，防止快速点击控制3s之内只能点一次
example2：游戏技能冷却，可用时随时可立即执行，当执行后有一个冷却时间

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * 节流
 * @param fn      需要做节流处理的函数
 * @param limit   技能的冷却（限制）时间
 * @returns {Function}
 */
function throttle(fn, limit = 500) {
  let flag = true
  return () => {
    if (flag) {
      fn.apply(this, arguments)
      flag = false
      setTimeout(() => { flag = true }, limit)
    }
  }
}
// 只会打印throttle1
const throttleTest = throttle((param) => { console.log(param) })
throttleTest('throttle1')
throttleTest('throttle2')

留言

欢迎交流想法。留言会通过 GitHub Issues 保存，首次使用需要登录 GitHub。