防抖debounce
定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。
关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指。
举例resize:
function debounce(fn, wait){
var timer = null;
return ()=>{
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));
上面是非立即执行版
立即执行版
function debounce(fn, wait){
let timeid, flag = true;
return () => {
clearTimeout(timeid);
if(flag){
fn();
flag = false;
}else{
timeid = setTimeout(()=>{
flag = true;
}, wait);
}
}
}
拖动浏览器窗口,触发resize,此时并不触发handle函数,定时器计时,在计时时间内再次触发resize的话,则会从新计时,这样做的好处就是拖动浏览器窗口触发resize,并不会频繁执行handle函数,只让其在需要执行的时候去运行,有效的去除了冗余。
常见写法:
const debounce = (func, delay = 200) => {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, arguments)
}, delay)
}
}
节流throttle
定义:让事件在一定时间内只执行一次。
本意是像水龙头的水滴一样,规定时间内只执行一次,减少频繁反复执行。
如搜索框input事件。
通过时间戳计算:
function throttle(fn,wait){
let startTime = 0;
return function(){
let endTime = Date.now();
if(endTime-startTime>wait){
fn();
startTime = endTime;
}
}
}
通过定时器:
function throttle(fn,wait){
let timeid = null;
return function(){
if(!timeid){
timeid = setTimeout(function(){
fn();
timeid = null;
},wait)
}
}
}
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!