前端 - js - - 防抖和节流

1、防抖

短时间内重复执行相同操作时 只执行最后一次 

常见场景：浏览器输入文字后 下面会有模糊提示

实现思路：延时器控制事件在几秒后执行 每次触发事件时都会重置延时器

const fn = () => {
  // 先定义timeout 避免第一次触发时clearTimeout报错
  let timeout;

  // 每次触发事件 重置延时器
  clearTimeout(timeout)
  
  // 规定一秒后再执行
  timeout = setTimeout(()=>{
    // 需要执行的操作
    // ...
  },1000)
}

2、节流

规定时间内只执行一次 

常见场景：某一按钮点击后会添加dom节点 避免用户短时间内点击多次消耗浏览器性能

实现思路：开关控制事件是否执行 延时器控制开关是否打开

let flag = true // 开关

const fn = () => {
  // 如果此操作在一秒内重复触发 就阻止执行
  if(!flag) return

  // 触发此操作时 将开关关闭 阻止第二次执行
  flag = false

  // 需要执行的操作
  // ...

  // 一秒后将开关打开
  setTimeout(()=>{
    flag = true
  },1000) 
}