防抖和节流

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

函数防抖

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

// 防抖 一定时间内只触发一次,如果在该时间内重新触发了事件处理函数,就会重新计时
var timer = null
function fangDou() {
  // 每次触发都判断是不是在执行事件处理函数中
  // 如果timer!=null 也就是在执行中 就重置定时器那么上一次事件就不会再触发
  if (timer != null) clearTimeout(timer)
  timer=setTimeout(() => {
    console.log('执行一次事件处理函数');
  }, 2000);
}
(function () {
  setInterval(() => {
    fangDou()
  }, 1000);
})()
//因为没有>=2s 所以每次触发都会重置定时器,就相当于销毁了上一次的事件触发 所以不会有输出

函数节流

函数节流（throttle）：防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

// 节流 规定好了2s之后才会执行处理函数,如果正在执行中就不再执行这个方法,但是仍会执行上一次的事件
// 2s之后重置定时器就可以重新执行方法,如果一直触发事件,始终都会2s才执行一次 就达到了间隔执行的目的
var timer = null
function jieLiu() {
  if(timer) return
  timer=setTimeout(() => {
    console.log('执行一次事件处理函数');
    timer=null
  }, 2000);
}
(function () {
  setInterval(() => {
    jieLiu()
  }, 1000);
})()
// 虽然1s触发一次但是结果是每隔2s才触发一次事件处理函数