js实现防抖和节流

防抖

常见使用场景

• 搜索输入框
• 文本编辑器自动保存

搜索输入框举例：每变化一个字符就发送一次ajax请求，耗费资源，应设定一个时间，比如1s，就是在每次停止输入1s后（认为用户输入停止，稳定了）再发送ajax请求，这样比较合理

这里封装了一个debounce函数，包裹本来应传入的回调函数，返回一个有防抖特性的回调函数
func：本来应传入的回调函数
wait：防抖设定的时间（ms）

function debounce(func, wait) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

使用举例，输入框防抖：

function handleInput(e) {
	console.log(this.value)
}
document.getElementById('ipt').onkeyup = debounce(handleInput, 1000)

节流

常见使用场景

• 高频事件（快速点击，鼠标移动，resize，scroll）
• 下拉加载

快速点击举例：比如游戏里的攻击键，一般来说并不是你点击了几次就击打几次，而是有一个攻速的概念，比如它设定了1s的节流，那么在1s内无论点了多少次，只有效第一次

同样封装了一个throttle函数，包裹原本应传入的回调函数，返回一个有节流特性的回调函数
func：本来应传入的回调函数
wait：节流设定的时间（ms）

function throttle(func, wait) {
  let timer = null
  return function (...args) {
    if (timer) return
    timer = setTimeout(() => {
      func.apply(this, args)
      timer = null
    }, wait)
  }
}

使用举例，快速点击节流：

function handleClick(e) {
	console.log(1)
}
document.getElementById('btn').onclick = throttle(handleClick, 1000)