js防抖和节流

前言

       当我们进行窗口或者滚动等事件监听时，会高频率触发事件，加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用评率，同时又不影响实际效果

一、防抖函数

        函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

        实现：1.定义一个全局的变量储存定时器ID

                   2.在每次执行函数事件前，将定时器清除，然后在开始本次定时器

/**
 * 防抖
 * @param {function} fn
 * @param {number} delay
 */
function debounce(fn, delay) {
  let times = null
  return function () {
    clearTimeout(times)
    times = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay) //利用闭包可用访问外部元素times
  }
}

window.onscroll = debounce(function () {
  console.log("调用了一次")
}, 500)

二、节流函数

        函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数