手把手教你写js节流和防抖

手把手教你写js节流和防抖

一、问题场景

很多时候，我们的代码中间会出现异步操作，例如向后台发送请求，窗口的resize事件等，这些操作会耗费事件，拿向后台发送请求来说，如果点击按钮发送请求，而用户在短时间内发送多次请求，一方面服务器压力会比较大，另一方面讲实际只有最后一次的请求结果是有用的，在用resize来说，改变窗口尺寸时会触发resize，但其实我们大多数情况下只需要最后一次回调的结果，而不是多次回调。为了解决这个问题，我们引入节流和防抖两种方法

二、问题解决

节流和防抖都是在使用高阶函数的内容

1.使用节流

节流的原理是我们进行异步操作时，设置节流的条件，在触发第一次的过程中，用户再次点击，将不触发条件，直到第一次触发过程完成，才可进行第二次触发

示例：

我们设置一个按钮，点击后将会触发一个handleclick事件

<button id="throttle">节流</button>

js部分如下

//实际想要去触发的目标函数
    function handleclick(){
   
    console.log('123');
}
//节流函数，接受参数为目标函数和延迟时长
function throttle(callback,delay){
   
    let start=0//设置初始的条件
return function