JavaScript中去抖与节流的详细介绍（代码示例）

来源：动视网责编：小采时间：2020-11-27 19:28:12

JavaScript中去抖与节流的详细介绍（代码示例）

JavaScript中去抖与节流的详细介绍（代码示例）:本篇文章给大家带来的内容是关于JavaScript中去抖与节流的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发

推荐度：

点击下载本文 文档为doc格式

导读JavaScript中去抖与节流的详细介绍（代码示例）:本篇文章给大家带来的内容是关于JavaScript中去抖与节流的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发

本篇文章给大家带来的内容是关于JavaScript中去抖与节流的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。
总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔。从结果上来看，节流降低了时间处理的敏感度；而去抖对从触发事件先存储起来，等到超过指定事件间隔后，一起发送。
越来越晕，直接上代码:
HTML

<input type="text" oninput="fatch()">

这里有一个供用户搜索使用的input标签，有一个input事件会触发的处理函数fatch，这个fatch会根据input的value值向后台去请求联想词。
上面代码思路是没有问题的，但是如果不做触发限制的话，可能会产生大量的http请求，而这些请求里面很多可能意义不大，为我们的优化提供了空间；下面，我就采用节流和去抖两种思路来解决这个问题。（一般针对input这种情况，使用去抖解决；这里只是方便做代码说明）

节流

function jieliu (func, time){//func 执行函数， time 时间间隔
 let lastRun = null
 
 return function(){
 const now = new Date()
 if(now - lastRun > time){
 func(...arguments)
 lastRun = now
 }
 }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
 console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
 listener(event.target.value)
})

以上是比较简单的节流实现以及基本的调用方式；使用闭包是为了保存每一次执行的lastRun。基本实现了限制请求频率的需求，但忽略了最后一个的触发。
改进如下：

function jieliu (func, time){// 触发时间间隔>time 发送请求
 let lastRun = null
 let timeout = undefined
 return function(){
 const self = this; 
 const now = new Date()
 if(now - lastRun > time){
 if(timeout){
 clearTimeout(timeout)
 timeout = undefined
 }
 func.apply(self, arguments)
 lastRun = now
 }
 else{
 if(!timeout){
 timeout = setTimeout(func.apply(self, arguments), time)
 }
 }
 }
}

加入timeout，判断是否是最后一次请求。

去抖动

function qudou(func, time){
 let timeout = undefined
 
 return function(){
 const argu = arguments
 const self = this

 if(timeout){
 clearTimeout(timeout)
 timeout = undefined
 }else{
 timeout = setTimeout(func.apply(this, arguments), time)
 }
 }
}

以上简单实现去抖动，同样，最后一次事件不能够触发处理函数。

改进如下：

function qudou(func, time){//判断连续time时间内不触发，发送func请求
 let timeout = undefined;
 let lastRun = null
 return function(){
 const self = this
 const now = new Date()
 if(now - lastRun > time){
 func.apply(self, arguments)
 }
 else {
 if(!timeout){
 timeout = setTimeout(func.apply(self, arguments), time)
 }
 else {
 clearTimeout(timeout)
 timeout = undefined
 }
 }
 lastRun = new Date()
 }
}

总结

通篇写下来，节流主要的实现方式还是通过对比“now”与“lastRun”的时间差，进而减少处理函数的调用次数；而防抖还是通过settimeout来延缓处理函数的调用时机，进而把多次触发的结果汇总一起调用处理函数。