react中用 js 实现防抖效果

什么是防抖

防抖就是当我们高频触发事件时，为了防止页面不停的加载，因为这些加载对我们来说是无用，我们只希望在我们停下来的时候延迟 n 秒再加载。比如搜索框，当我们在不停输入的时候，其中的大部分加载是不需要的，当停止输入的时候延迟 1 秒再去执行搜索逻辑，能防止页面过渡加载。

js实现防抖

实现思路：当输入框内容开始改变时，设置一个定时器，当页面还在改变时，就把刚刚那个定时器清理掉，然后又设置一个定时器，当不在改变输入框内容时，等待定时器执行。

export default function Search() {
  
  let timeout = null;
  //timeout如果声明在 debounce里，每次调用 debounce 都会重新赋值
  function debounce(fn, delay) {
    return function() {
      if( timeout !== null ) {
        clearTimeout(timeout)
      }
      timeout = setTimeout(fn, delay)
      timeout因为闭包，所以缓存了值
    }
  }
  function search() {
    console.log('搜索逻辑')
  }
  return(
    <input
      type='text'
      onChage={() =>
      //debounce 返回的是一个函数，所以要调用一下才执行
      debounce(search, 1000)()
      }
    />
  )
}

这种写法是我摸索出来的，还有一种写法，我们每次调用 debounce 都会重置一下 timeout，而我们其实只需要它返回的清除定时器的函数， debounce 如果只执行一次就能不重置 timeout 了。

export default function Search() {
  function debounce(fn, delay) {
    let timeout = null;
    return function() {
      if( timeout !== null ) {
        clearTimeout(timeout)
      }
      timeout = setTimeout(fn, delay)
      timeout因为闭包，所以缓存了值
    }
  }
  function search() {
    console.log('搜索逻辑')
  }
  
  var once = debounce(search, 1000)
  return(
    <input
      type='text'
      onChage={() => once()}
    />
  )
}