js防抖和节流
函数防抖(debounce)
含义:在一段时间触发或调用函数时,只执行一次,也可以理解为触发n秒之后才会调用一次
场景:监听用户输入框变化
实现防抖:定时器
<input type='text' v-model='i_value' />
<span>{{span_value}}</span>
watch:{
i_value(val){
clearTimeout(this.firstTimeout);
this.firstTimeout = settimeout(()=>{
this.span_value = val;
},500)
}
},
函数节流(throttle)
含义:当持续触发事件时,保证一定时间段内只调用一次事件处理函数,是针对调用频率高的函数,通过设置定时器,使其在执行后间隔一段时间,才进行下一次的执行,避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。
场景:上下滑动加载数据、按钮的重复点击
实现节流:一种是定时器,另外一种是计算时间差
// 定时器
function throttle(func, wait) {
let timeout
return function() {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
func.call(this, arguments)
}, wait)
}
}
}
// 计算时间差
function throttle(func, wait) {
let previous = 0
return function() {
let now = +new Date()
let remain = wait - (now - previous)
if (remain < 0) {
previous = now
func.call(this, arguments)
}
}
}
// 将previous(上一次的执行时间戳)设置为自由变量,然后在每一次触发事件的时候都获取当前时间戳;
wait为理论等待时间,now - previous为实际等待时间,那么remain就是剩余时间
函数防抖:将几次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。