js 函数节流和函数防抖

前言

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。

函数节流

理解

函数节流可以理解为必定时间内，代码只运行一次。

封装

  function throttle(callback, time) {
    let timer = null
    return function() {
      if (timer) return
      timer = setTimeout(() => {
        callback()
        timer = null
      }, time)
    }
  }

场景

类似生活中吃饭，吃完一碗后才会去盛第二碗，而不是吃一口就去盛一口。
举个实用的例子：
鼠标滑过div，时刻获取当前的位置，或者其他操作。
上代码：

html部分

样式也写在内了，样式不重大

<style>
  #box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eee;
  }
</style>
<div id="box"></div>

js部分

box.onmousemove = throttle(() => {
  // 这里用console.log取代了回调里的具体内容
  console.log(Date.now()) //这里是回调函数部分，需要什么自己补充
}, 1000)

函数防抖

理解

函数防抖可以理解为交互结束了后的必定时间，运行一次代码。

封装

    function debounce(callback, time) {
      let timer
      return function() {
        if(timer) clearTimeout(timer)
        timer = setTimeout(() => {
          callback()
        }, time)
      }
    }

场景

类似现实生活中的电梯，列如 5 个人等电梯，上电梯的时候一个一个的上，都上去了电梯才会走。而不是上一个人电梯就走了，再返回来接第二个人。
举个实用的例子：
一个输入框，我想等输入完过1秒才去调接口，或者做一些其他的操作。而不是输入的过程中一直调用接口。这时候就需要用到函数防抖了。
上代码：

html部分

<input type="text" />

js部分

  const input = document.querySelector( input )
   // 这里用console.log取代了回调里的具体内容
  input.oninput = debounce(() => {
    console.log(Date.now())
  }, 1000)