时间:2021-07-01 10:21:17 帮助过:9人阅读
无论是面试还是在讨论浏览器优化过程中,都会涉及到去抖动和节流的问题。
总的来说,这二者是一种限制事件触发频率的方式。不同的是,节流会指定事件触发的时间间隔;而去抖动会指定事件不触发的时间间隔。从结果上来看,节流降低了时间处理的敏感度;而去抖对从触发事件先存储起来,等到超过指定事件间隔后,一起发送。
越来越晕,直接上代码:
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来延缓处理函数的调用时机,进而把多次触发的结果汇总一起调用处理函数。
以上就是JavaScript中去抖与节流的详细介绍(代码示例)的详细内容,更多请关注Gxl网其它相关文章!