节流和防抖

1. 异同

​ 相同点：都是优化高频触发事件的手段。

​ 不同点：节流：n秒内多次触发事件只执行一次；

​ 防抖：触发事件后计时n秒再执行，n秒内再次触发事件重新计时；

​ 😁记忆 – 节流：等公交车，固定时间来一趟；

​ 防抖：上公交车，每多上一个人（多触发一次事件）就多等n秒才能开车；

​ 示意图

​

2. 应用

节流：监听滚动条懒加载、搜索框联想、表单重复提交等

防抖：浏览器窗口改变，调整完成后再渲染

3. 实现

• 节流

  时间戳法（闭包）：

  // 以点击事件为例
  let button = document.getElementById('button');
  button.onclick = throttle(handleClick);
  // 节流函数
  function throttle (fn, delay=2000) {
      let oldTime = Date.now();
      console.log('old===', oldTime);
      return function (...args) {
        	console.log(args)
        	let newTime = Date.now();
        	if (newTime - oldTime >= delay) {
          	fn.apply(null, args);
  	        oldTime = Date.now();
      	}
      }
  }
  function handleClick() {
      console.log('yes,click')
  }

  定时器法：

  function throttle (fn, delay=2000) {
      let timer = null
      return function (...args) {
          if (!timer) {
              timer = setTimeout(() => {
                  fn.apply(null, args)
                  timer = null;
              }, delay)
          }
      }
  }

• 防抖

  let input = document.getElementById('input');
  input.addEventListener('keyup', debounce(handleInput))
  function debounce (fn, delay=2000) {
      let timer = null;
      return function() {
          clearTimeout(timer);
          timer = setTimeout(() => {
              fn.
          }, delay);
      }
  }
  function handleInput() {
      console.log('yes, searching...')
  }