一、防抖
1、定义:n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时。
2、为什么要防抖?
有的操作是高频触发的,但是其实触发一次就好。比如说监听输入框的输入,不应该每次都去触发监听,应该是用户完成一段输入后在进行触发。即等用户高频事件完了,在进行事件操作。
3、防抖的原理:你尽管触发事件,但是我一定在事件触发n秒无操作后才执行。
例:我们规定3s
为防抖的标准,那么:
(1)第一次要求执行事件 - 此时倒计时3s
(2)倒计时2s
(3)倒计时1s
(4)0.5s时事件再次被触发 - 此时倒计时3s
(5)…3s内无事发生
(6)执行事件,共用了5.5s
4、防抖怎么做?
5、设计思路:事件触发后开启一个定时器,如果事件在这个定时器限定的时间内再次触发,则清除定时器,在写一个定时器,定时时间到则触发。
function throttle(fn, delay){
let valid = true;
return function(){
if(valid) {
setTimeout(()=> {
fn.apply(this, arguments);
valid = true;
}, delay)
valid = false;
}
}
}
二、节流
1、定义:n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效。
2、为什么要节流?
防抖存在一个问题,事件会一直等到用户完成操作后一段时间在操作,如果一直操作,会一直不触发。这里正确的思路应该是第一次点击就发送,然后上一个请求回来后,才能再发。即某个操作希望上一次的完成后再进行下一次,或者希望隔一段时间触发一次。
3、节流原理:如果你持续触发某个事件,特定的时间间隔内,只执行一次。
4、节流怎么做?
5、设计思路:我们可以设计一种类似控制阀门一样定期开放的函数,事件触发时让函数执行一次,然后关闭这个阀门,过了一段时间后再将这个阀门打开,再次触发事件。
function throttle(fn, delay){
let valid = true;
return function(){
if(valid) {
setTimeout(()=> {
fn.apply(this, arguments);
valid = true;
}, delay)
valid = false;
}
}
}
三、总结:
1、防抖和节流的相同点:防抖和节流都是为了阻止操作高频触发,从而浪费性能。
2、防抖和节流的区别:
防抖是让你多次触发,只生效最后一次。适用于只需要一次触发生效的场景。
节流是让你的操作,每隔一段时间触发一次。适用于多次触发要多次生效的场景。