锐客网

  1. 首页 > it技术 > >

前端函数防抖(debounce)和函数节流(throttle)

什么是防抖和节流: 比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。
【前端函数防抖(debounce)和函数节流(throttle)】区别
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。函数防抖将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。函数节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
函数防抖
定义: 函数防抖就是在一段时间触发或调用函数时,只执行一次; 也可以理解为触发n毫秒之后才会调用一次
优点: 优化系统性能
例如每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。
如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。
也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。
应用场景：实时搜索（keyup）、拖拽（mousemove）


前端函数防抖(debounce)和函数节流(throttle)
文章图片
演示效果

前端函数防抖(debounce)和函数节流(throttle)
文章图片
代码片段 封装防抖函数
完整demo


前端函数防抖(debounce)和函数节流(throttle)
文章图片
还有一种方法只不过获取不到this 直接上代码 不发截图了
function debounce(fn,wait){
var timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}


function handle(){
console.log('你好');
}
input.oninput=debounce(handle, 1000)
函数节流
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。
指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)
时间戳版本


前端函数防抖(debounce)和函数节流(throttle)
文章图片
窗口大小改变时1秒执行一次 定时器版本
前端函数防抖(debounce)和函数节流(throttle)
文章图片
区别：
时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

    推荐阅读


    上一篇：距离的奥秘

    下一篇：2019-11-27（九）