JS防抖和节流

#btn {
  width: 100px;
  padding: 5px 20px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  background: #f77a7a;
}

<div id="btn">点我啊</div>
<p id="content">点了0次</p>

let num = 1
document.getElementById('btn').onclick = debounce(count, 1000, false) // 调用防抖函数

function count() {
   document.getElementById('content').innerText = `点了${num++}次`
}

防抖函数
防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
适用场景：
按钮提交场景：防止多次提交按钮，只执行最后提交的一次
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似
生存环境请用lodash.debounce

/**
  * @desc 函数防抖
  * @param fn 函数
  * @param delay 延迟执行毫秒数
  * @param immediate true 表立即执行，false 表非立即执行
  */
function debounce(fn, delay, immediate) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    if (immediate) {
      var callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, delay)
      if (callNow) fn.apply(this, args)
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }
}

节流函数
节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
适用场景：
拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题

/**
  * @desc 函数节流
  * @param fn 函数
  * @param delay 延迟执行毫秒数
  * @param type 1 表时间戳版，2 表定时器版
  */
function throttle(fn, delay = 500, type) {
  let previous = 0
  let flag = true

  return (...args) => {
    if (type === 1) {
      let now = Date.now()

      if (now - previous > delay) {
        fn.apply(this, args)
        previous = now
      }
    }
    if (type === 2) {
      if (!flag) return
      flag = false
      setTimeout(() => {
        fn.apply(this, args)
        flag = true
      }, delay)
    }
  }
}