防抖和节流

1、防抖：单位时间内，频繁触发事件，规定时间只执行最后一次

1.典型场景：搜索框的输入

2.代码思路：利用定时器，每次触发前清空之前的定时器重新开始

     // 首先声明一个全局变量为空，把它当做定时器的名字
// 然后再声明一个函数点击按钮的时候触发
// 函数内开启一个定时器，定时器上面使用clearTimeout清除定时器
// 当在规定时间内多次点击按钮的时候，就会一直清除定时器
let timer = null
document.querySelector('button').onclick = function () {
  clearTimeout(timer)
  timer = setTimeout(() => {
    console.log(1);
  }, 300)
}

2、节流：单位时间内，频发触发事件，规定时间内只执行一次

1.典型场景：高频事件，快速点击，鼠标滑动，scroll 事件

2.代码思路：利用定时器，等定时器执行完毕，才开启定时器

// 声明一个全局变量为false（阀门）
// 然后再声明一个函数点击按钮的时候触发
// 函数内开启一个定时器，进入函数后首先进行一个if判断，如果阀门为true打开就直接return
// if语句下方，将阀门变为true,然后进入定时器，定时器内部关闭阀门为false
// 当定时器内部代码未执行完毕前，阀门就一直为true，只有定时器执行完毕后，阀门才重新关闭
let flag = false
    document.querySelector('button').onclick = function () {
      if (flag) {
        return
      }
      flag = true
      setTimeout(() => {
        console.log('节流函数');
        flag = false
      }, 2000)
    }