函数防抖和函数节流 - 概念

函数防抖和函数节流的知识，内容包括简介、函数节流、函数防抖。

一、简介

玩过 5 V 5 mobile 游戏的都知道，它里面有「技能冷却」和「回城」机制，函数节流和函数防抖对应这两个东西

• 函数节流和“技能冷却”类似，你做了一个操作之后要等一段时间后才能再操作
• 函数防抖和“回城”类似，你要回城了，如果中途被打断，再次回城要重新计时开始

二、函数节流

let $button = document.querySelector('button')
let fn = ()=> console.log('我放技能了')
let cd = false
$button.onclick=()=>{
  if(!cd){
    fn()
    cd = true
    setTimeout(()=>cd = false,1000)
  }
}

三、函数防抖

• 带着一起做

let $button = document.querySelector('button')
let fn = ()=> console.log('我回城了')
let timeoutID = null
$button.onclick=()=>{
  if(timeoutID){
    window.clearTimeout(timeoutID)
  }
  timeoutID = setTimeout(()=>{
      fn()
    timeoutID = null
  },1000)
}

「@浪里淘沙的小法师」