使用王者荣耀的方式,带你了解js的节流和防抖

防抖和节流

​ 防抖 可以理解为 王者荣耀中的回城

​ 节流 可以理解为 王者荣耀中的释放技能

防抖的实现思路

什么是防抖?

我们玩的王者荣耀,每当我们点击回城,需要等待一定的时间才能回城成功,假若我们在回城的时间内频繁的再按回城的话，回城时间就会重新开始计算，只有你在按回城的最后一次并等待时间才能回城成功。

同理,我们每次在输入框输入值 等待一定的时间,就会触发我们的 后台请求函数,如果我们一直输入的话计时器就会重新开始计算，只有你在最后一次调用有效

为什么需要防抖?

如果我们每次输入都会触发的话，这样子就会增加服务器的压力,但是当我们输入完成了之后，再触发我们的后台请求函数的话，这样子服务器的压力就不会那么大了！ （可以这样子理解吧）

总的来说，就是 事件被触发后,在n秒后执行函数，如果在n秒内多次触发事件,则会重新开始计时

（王者荣耀技能释放后,进入冷却时间,在冷却时间内，点击技能是释放不了技能的,冷却时间过了,才能重新释放技能）

• 代码实现:

function fangdou(fn,delay){
    let timeoutId;
    return function(){
        clearTimeout(timeoutId);
       	timeoutId(()=>{
             fn.apply(this,arguments);
        },delay)
    }
}

• 应用

//html代码
....
<input id="input">
....

//请求函数
function request(val){
    console.log('回城成功~~duang',value)
}

let debounce = fangdou(request,700)   //应防抖函数

document.querySelector("#input").addEventListener("keyup",function(e){
    debounce(e.target.value);
})

我们来看看效果

节流的实现思路

什么是节流?

在王者荣耀,我们释放完技能后需要等待一定的时间才能再次释放, 如果我们 在技能冷却未好的情况下,是释放不出来的。

同理，我们每次在输入框输入值,再点击我们的button按钮发生请求后台后,需要等待一定的时间才能再次调用请求函数。

为什么需要节流?

如果用户频繁的点击的话,就会向服务器请求多次数据,虽然可以返回到数据,但是我们希望的是用户只有在一段时间之后，才能再触发我们的请求后台数据函数，这就是节流

总的来说，节流就是 在规定的时间内，函数只会执行一次,如果在规定时间内多次触发,也还是只有一次有效

定时器代码实现：

function jieliu(fn,delay){
    let timerId;
   	return function(){
        if(!timerId){
            fn.apply(this,arguments);
            timerId = setTimeout(()=>{
                clearTimeout(timerId);
                timerId = null
            },700)
        }else{
             console.log('技能冷却中,cd未好');
        }
    }
}

1.执行的思路

​ 看是否有timerId 如果没有就调用请求函数 ，如果有的话 就在700毫秒后才能再次调用 request函数

时间戳实现节流

function jieliu(fn,delay){
    let last = 0;
    return function(){0
        let now = Date.now();
        if(now >= last + delay){
            fn.apply(this,arguments);
            last = now;
        }else{
            console.log('技能冷却中,cd未好');
        }
    }
}

1.执行思路

​ 现在调用函数now时间 > (上一次调用的函数时间last + 设置的间隔时间delay ) 表示 已经超过我们设置的delay时间 所以可以再次调用我们的调用后台函数

• 应用

 //html
<input type="text" name="" id="input">
<button id="btn">节流发送</button>

//js
function request(val){
    console.log('技能释放完成:',val);
}

let throttle = jieliu(request,2000)   //应用节流函数

let input = document.querySelector("#input");
let btn = document.querySelector("#btn");
btn.addEventListener('click',function(e){
    let val = input.value
    throttle(val);
})

下边我们来看一下效果吧：

​