防抖与节流深度形象化理解

防抖：就是一定时间内，只会执行最后一次任务；
节流：就是一定时间内，只执行一次 ；

//函数节流
var r = function () {
  console.log("薇恩开启大招 一秒隐身 进入夜行  收割时刻");
};
function lolHeroskill(fn, delay) {
  let cd = true;
  return function () {
    if (cd) {
      fn();
      cd = false;
      setTimeout(() => {
        cd = true;
      }, delay);
    } else {
        console.log('我进来else里面了')
    }![在这里插入图片描述](https://img-blog.csdnimg.cn/20201201194051688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb3NoYW55eg==,size_16,color_FFFFFF,t_70#pic_center)

  };
}
const use = lolHeroskill(r, 3000);
use();
use();
use();
use();
use();
use();
use();
use();
use();
use();


//可应用于防止用户连续事件 n秒内只执行一次  












//防抖 
function shuaka(fn, delay){
    let timerId = null
    return function(){
        if(timerId){window.clearTimeout(timerId)}
        timerId = setTimeout(()=>{
            fn()
            timerId = null
        },delay)
    }
}
const startshuaka = shuaka(()=>console.log('最后一个人上车了 公交可以开了'),5000);

startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()
startshuaka()


//n秒内只执行最后一次

防抖：一定时间内，公交车司机等最后一个人上车后才关门

节流：薇恩开启大招后，cd期间再按R键是没反应的(n秒内只执行一次)