js防抖节流

防抖（debounce）

在倒计时时间结束后触发一次方法，当计时时间内再次触发此方法则重新计时

如同英雄回城B读条时间内，点击移动就会打断回城读条，防抖特效就是不在操作英雄后会自动回城从新读条

 <div style="width: 300px; height: 300px; background: skyblue" id="main">mouseMove</div>
 
 let iSmain = document.getElementById("main");
 
 function isMove(e){
     console.log(e.offsetX)
 }

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

//绑定鼠标移动事件 移动停止后0.5s触发事件 当0.5s内鼠标一直移动则一直不会触发事件 直到停止移动0.5s后
iSmain.onmousemove = debounce(isMove, 500);

节流(thorttle)

在规定时间内只会触发一次方法

如同英雄F闪现抢人头，当还在闪现用完后的冷却时间时多次按下F无效

<div style="width: 300px; height: 300px; background: skyblue" id="main">mouseMove</div>
 
 let iSmain = document.getElementById("main");
 
 function isMove(e){
     console.log(e.offsetX)
 }

function thorttle(fn,delay=1000){

    //method 1 首次不会执行 需等待计时触发------------
    let switch=true
    return function(){
        if(!switch) return;
        switch=false
        setTimeout(()=>{
            fn.apply(this,arguments)
            switch=true
        },delay)
    }
    //method 1 over------------
    
    //method 2 首次会执行 最后一次停止动作后没有延时执行程序------------
    let last=0
      return function(){
      let now=+new Date()
        if(now-last>delay){
          fn.apply(this,arguments)
          last=now
        };
   
    }
    //method 2 over------------
  
}

//绑定鼠标移动事件 一直移动 但只会在每次触发完的3s后再次触发
iSmain.onmousemove = thorttle(isMove, 3000);