防抖和节流的思想与实现逻辑

防抖节流

节流的思想就像现实世界游戏里的人物触发大招后等待几秒后才能再次执行

防止用户连续事件

//函数节流
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里面了')
    }
  };
}
const use = lolHeroskill(r, 3000);
use();
use();
use();
use();
use();
use();
use();
 

防抖像是一群人上公交的过程连续执行会触发事件直到最后一次触发后才执行
执行用户连续事件

//防抖 
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()