前端防抖与节流

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

防抖

名词解释

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

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

代码实现

/** * 防抖 * @param fn 须要作防抖处理的函数 * @param delay 技能准备（延迟）执行时间 * @returns {Function} */
function debounce(fn, delay = 500) {
  let time = null
  return function() {
    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：游戏技能冷却，可用时随时可当即执行，当执行后有一个冷却时间

代码实现

/** * 节流 * @param fn 须要作节流处理的函数 * @param limit 技能的冷却（限制）时间 * @returns {Function} */
function throttle(fn, limit = 500) {
  let flag = true
  return function() {
    if (flag) {
      fn.apply(this, arguments)
      flag = false
      setTimeout(() => { flag = true }, limit)
    }
  }
}
// 只会打印throttle1
const throttleTest = throttle((param) => { console.log(param) })
throttleTest('throttle1')
throttleTest('throttle2')
复制代码