函数节流和函数防抖

我们知道，js有些事件例如resize，mousemove等是会不间断触发的，例如我们简单的一个scroll事件：

function scrollFn() {
    console.log(1)
}
window.onscroll = scrollFn

我们需要在滚动的时候去做一些事情，如上图可见，我们只是简单的console，在一次滚动过程中函数即执行了将近20次，如果这个函数有更为复杂的方法，比如操作dom或者其他交互，会严重影响性能。

为了避免这个问题，我们一般会使用定时器来对函数进行节流。

在javascript高级程序设计中，定义了一个函数节流方法，如下：

function throttle(method,context) { // 执行函数、哪个作用域中执行
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
        method.call(context)
    },300)
}

throttle函数接收两个参数，即要执行的函数及执行环境，如果执行环境未定义，默认则为windows。在这个函数中，会在第一次执行时为method一个定时器属性，在指定时间间隔（300）内再次执行时会清楚上一次定义的定时器并创建新定时器知道停止。

函数节流

函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

 function throttle(method, duration) {
    let begin = new Date()
    return function () {
      const context = this, args = arguments
      let current = new Date()
      if (current - begin >= duration) {
        method.apply(context, args)
        begin = current
      }
    }
 }
 function resize() {
    let n = 1
    console.log(++n)
  }

  window.onresize = throttle(resize, 5000)

函数防抖

函数调用n秒后才会执行，如果函数在n秒内被调用的话则函数不执行，重新计算执行时间。

  function debounce(method, delay) {
    let timer = null
    return function () {
      const context = this, args = arguments
      clearTimeout(timer)
      timer = setTimeout(function () {
        method.apply(context, args)
      }, delay)
    }
  }

  function resize() {
    let n = 1
    console.log(++n)
  }

  window.onresize = debounce(resize, 500)

参考文章

函数节流和函数去抖
7分钟理解JS的节流、防抖及使用场景