防抖和节流的理解---个人向

不管是在面试中，还是在各种地方搜到的面试题里，防抖和节流都是一个老生常谈的话题，今天又查找了各个地方关于这两个老斑鸠的描述，结合自己的理解，记录一下。

防抖：

概念：防止抖动，在xx荣耀中，抖动就会打断回城，又需要重新点击回城才能开始倒数。因此，我们在项目里对于一个事件，只有经过一段时间后，才能够发生，如果中间打断，就会重新开始计时，这就是防抖。

因此，两个关键点，进度条（延迟器），回城（事件）。在vue中，我们可以在data中定义一个timer作为这个进度条，timer：null，假设我们在第一次回城的时候被打断，我们进入第二次回城，那第一次的倒计时秒数，应该清零，对应着这个timer需要进行清除定时器操作clearInterval（this.timer），并且重新进行timer的操作，知道达到回城所需要的事件（延迟秒数）

data(){
    return:{
        timer:null
    }
},
methods(){
    setBackHome(){
        clearInterval(timer)
        this.timer=setInterval(()=>{
            //这里写回城（事件）
        },1000)
    }
}

核心部分大概是这样。

应用场景：文本框中，快速输入字符，但是要求输入完两秒才发送请求，不到两秒又继续输入，输入完后还需重新计时。

节流：

概念：节制流动。在xx荣耀中，所有的技能都会有相应的cd，我们不能够无限制点击释放技能，如果处于技能冷却中，其实是没办法点的，只有当倒计时结束后，才能狗再点击一下，这样就可以节制频繁的点击。

那在我们的项目中，如果一个请求发送到返回数据的时间是三秒，但是这三秒中可以不停的点击发送，我们需要做的是节制这个请求的流动，因此，我们也来为请求设置一个cd，这样，不管我们点击多少次，只要处于cd中，就不会发送请求。当然，cd的时间，从事件开始，我们就打一个标识，在请求还没返回的时候，继续发送请求，我们看到这个标识，就不会去二次发送，当我们请求返回了，我们再把标识去掉，就可以重新二次发送，从而达到节流的目的 。

data(){
    return:{
        isOK:false
    }
},
methods(){
    onReachBottom() { 
         if (this.isloading) 
         return 
         this.getRequest()
    },
    async getRequest(){
        this.isOK=true
        //这里发送请求进行操作
        ....
        this.isOK=false
        
    }
}

 逻辑大概是这样。

应用场景：小程序下拉多次，但是新的内容还没刷新加载出来，别让他发多次请求，会增加负荷。多次点击事件，只允许一次网络请求。