节流防抖及其应用(搜索框和连续滚动优化)

看完本文，可以解决下面三个面试题

1. 手写一个节流、防抖函数并讲解原理

2. 手写一个简单搜索框，并实现搜索逻辑

3. 手写一个滚动优化

本文配有完整的 demo 演示，可前往逐一测试，使用 netlify 部署，访问速度可能稍慢。

https://lxfriday-give-me-job-web-serve.netlify.com/

节流防抖是一种防止函数频繁无序执行的设计思想，它的核心目的是让无序变为有序，让函数执行更符合预期目的。

防抖

防抖的原理是，只要在倒计时的范围内，新触发防抖函数就会导致计时器重置，要重新等待 wait 时长之后才能执行。

简单实现

最简单的 debounce

示例中绑定了 this，在调试工具中可以看到 this 和 event 对象

function debounce(func, wait) {
  let timeout
  return function debounced(...args) {
    const ctx = this
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(ctx, args)
    }, wait)
  }
}

需要立即执行的防抖

debounce2 with immediate

和上面不同之处在于，在定时时间之后，只要触发就会立即执行（第一种是要等待 wait 时长），然后至少在 wait 之后才能进行下次触发。

function debounce(func, wait, immediate) {
  let timeout
  r