防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题;

函数防抖

函数防抖，就是指触发事件后在规定时间内函数只能执行一次，如果在 规定时间内又触发了事件，则会重新计算函数执行时间。

function debounce(fn,delay){
  let timeId = null
  return function(){
    if(timeId){clearTimeout(timeId)}
    timeId = setTimeout(()=>{
      fn.apply(this,arguments)
      timeId = null
    },delay) 
  }
}

const debounced = debounce(()=>{console.log('hi')},5000)

debounced()
debounced()

函数节流

限制一个函数在规定时间内只能执行一次。

function fireball(fn,time){
  let canUse = true
  return function(){
    if(canUse){
      fn.apply(this,arguments)
      canUse = false;
      
      setTimeout(()=>canUse = true,time)
    }else{
      console.log('技能cd中')
    }
  }
}

const fireballs = fireball(()=>console.log('火球术'),10000)
setInterval(()=>{
   fireballs()
},1000)

总结下防抖和节流的区别：

-- 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

-- 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。