防抖
1. 概念
防抖具体指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时
2. 原理
防抖实现原理就是利用定时器,函数第一次执行时设定一个定时器,并且通过闭包缓存起来,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行。
/*
* 防抖函数
* @param fn 事件触发的操作
* @param delay 多少毫秒内连续触发事件,不会执行
* @returns {Function}
*/
function debounce(fn,delay) {
let timer = null; //通过闭包缓存了一个定时器
return function () {
const args = [...arguments];
const that = this
timer && clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(that,args);
},delay);
}
}
window.onscroll = debounce(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},200)
节流
节流有多种不同应用场景的表现形式,一般可以分为三种,分别是首节流,尾节流,兼顾型节流。
- 首节流,第一次会马上执行,之后的操作不一定会执行。可以理解问第一次执行,最后一次不执行。
- 尾节流,第一次不会马上执行,而是一段时间后在执行。可以理解为第一次不执行,最后一次执行。
- 兼顾型节流,第一次会马上执行,最后一次也会执行。
首节流
function throttle(fn, delay){
let last=0;
return function(){
let now=Date.now();
if(now-last>delay){
fn.apply(this, arguments);
last=now;
}
}
}
尾节流
// 写法一
function throttle(fn, delay) {
let timer = null;
return function () {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
// 写法二
/**
* 节流函数
* @param fn 事件触发的操作
* @param delay 间隔多少毫秒需要触发一次事件
* @returns {Function}
*/
function throttle(fn, delay) {
let flag = true;
return function () {
if (!flag) {
return;
}
const that = this
const args = [...arguments];
flag = false;
setTimeout(() => {
fn.apply(that, args);
flag = true;
}, delay);
}
}
window.onscroll = throttle(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置:' + scrollTop);
},200)
兼顾型节流
function throttle(fn, delay){
let last=0;
let timer=null;
return function(){
let now=Date.now();
let reming=delay-(now-last);
clearTimeout(timer);
if(reming<0){
fn.apply(this, arguments);
last=now;
}else{
timer=setTimeout(()=>{
fn.apply(this,arguments);
}, reming);
}
}
}
使用场景
防抖
当用户在短时间内,多次点击登陆,发送短信等请求数据的操作时 文本编辑器一段时间不操作,进行自动保存 搜索框进行联想,用户不断输入值,只在停顿1-3s时才进行联想
节流
鼠标mouseover事件,只执行一次时 浏览器滚动,每隔1-3s才计算一次位置信息,避免边滚动边计算
浏览器默认情况下都会有自己的监听时间间隔(以谷歌浏览器为例,大概在4-6毫秒,就会去监听一下事件是否有发生),如果检测到多次事件的监听执行,那么就会造成不必要的资源浪费)