前端面试题 - 6. 介绍防抖节流原理、区别、应用和实现

防抖实现

一定时间内持续触发是不会重复调用，当超过一定时间后再回执行，主要应用在输入框这种地方，当需要查询一个东西的时候，持续输入是不会请求接口。

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(() => {
          fn.apply(this, args)
      }, delay)
  }
}

const Component = () => {
    const onClick = debounce(() => {
            console.log('防抖')
    }, 1000);

    return <button onClick={onClick}>测试</button>
}

export default Component;

节流实现

节流表示的是不一直触发，一定时间触发一次，常用在滑动滚动或者视窗大小变化的控制。

function throttle(fn, delay) {
  let start = +Date.now()
  let timer = null
  return function(...args) {
      const now = +Date.now()
      if (now - start >= delay) {
          clearTimeout(timer)
          timer = null
          fn.apply(this, args)
          start = now
      } else if (!timer){
          timer = setTimeout(() => {
              fn.apply(this, args)
          }, delay)
      }
  }
}

// 计算时间的，所以第一次会执行
const throtte2 = (fn, wait) => {
    let pre = 0;
    return function() {
            const now = new Date().getTime();
            if(now - pre > wait) {
                    fn();
                    pre = now;
            }
    }
}

const Component = () => {
    const onClick = throtte2(() => {
            console.log('节流')
    }, 1000);

    return <button onClick={onClick}>测试</button>
}

export default Component;

参考

节流防抖简单实现：blog.csdn.net/qq_42068550…