概念
防抖
函数防抖(debounce):触发高频事件后n秒内,函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间,等到n秒后再执行。
例如:在一次触发事件时,不立即执行函数,而是给出一个期限值,比如500ms,
如果在500ms内没有再次触发事件,那么就500ms到了执行函数;
如果在500ms内再次触发事件,那么当前的计时取消,重新开始计时。
实现的效果:如果在短时间内触发同一事件,只会执行一次函数(用户触发事件过于频繁,只要最后一次事件的操作)。
节流
函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
就类似于一个控制阀门,设计一种定期开放的函数,让函数执行一次后,在某个时间段内暂时失效,过了这段时间再重新激活。
实现的效果:如果在短时间内大量触发同一事件,那么在函数执行一次后,该函数在指定的时期内不再工作,直到过了这段时间才重新生效。(控制执行次数)
区别
防抖和节流都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
这里借用一张图来说明防抖和节流之间的区别:
可以看出, 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
应用场景
防抖:页面resize事件,常见于需要做页面适配的时候,需要根据最终呈现的页面情况进行dom渲染,因为只需要判断最后一次的变化情况,所以适用防抖。
节流:搜索框input事件,例如,需要输入实时搜索,可以使用函数节流(间隔一段时间就必须查询相关内容),或实现输入时间间隔大于某个值(例如500ms),就当做用户输入完成,然后开始搜索。
实例
(1)打印出输入框的内容
<input type="text">
<script>
let inp=document.querySelector('input')
inp.oninput=function(){
console.log(this.value)
}
</script>
防抖前:每输入一个字符就打印一次
防抖后:打印出最后一次输入的结果
// 防抖后
<input type="text">
<script>
let inp=document.querySelector('input')
inp.oninput=debounce(function(){ //需要执行的函数
console.log(this.value)
},500)
function debounce(fn,delay){ //防抖函数
let t=null;
return function(){ //利用到闭包函数
if(t!==null){
clearTimeout(t)
}
t=setTimeout(()=>{
fn.call(this)
},delay)
}
}
</script>
(2)滑动滚动条时,打印内容
节流前:滑动一下滚动条,就打印好多次
body{
height:2000px;
}
//节流前
<script>
window.onscroll=function(){
console.log("Hello")
}
</script>
节流后:滑动滚动条在一段时间内只打印一次
<script>
window.onscroll=throttle(function(){
console.log("Hello")
},500)
function throttle(fn,delay){
let flag=true
return function(){ //闭包函数
if(flag){
setTimeout(()=>{
fn.call(this)
flag=true
},delay)
}
flag=false
}
}
</script>