前言
防抖与节流函数都是控制事件触发频率的函数,能够在某些场景实现性能优化。我直接弄个简单粗暴的。
一、防抖是什么?
防抖是在指定时间内,如果连续触发当前事件,就不会执行该函数。直到指定时间内只触发一次的时候再执行。
二、函数防抖实现
/**
* @description: 防抖函数
* @param {函数} fn
* @param {延时毫秒数} delay
* @return {*} 原函数
*/
export const debounce = (fn, delay = 1000) => {
if (window.timer) clearTimeout(window.timer);
window.timer = setTimeout(() => {
fn()
}, delay)
}
直接在window上挂载一个延时器,设置延迟时间去触发函数,在延迟时间还未结束的时候,如果再次触发防抖函数,就把延时器清空了,内部的函数就没有执行了
// 需要执行的代码写在这个函数
const incident = () => {
console.log(1)
};
// 会频繁触发的一个函数 比如input事件
const often = () => {
// 防抖
debounce(incident, 800);
};
三、节流是什么?
节流是在函数被频繁调用的时候,定期性的执行,类似于setInterval执行规则
四、函数节流实现
/**
* @description: 节流函数
* @param {函数} fn
* @param {间歇毫秒数} delay
* @return {*} 原函数
*/
export const throttle = (fn, delay = 500) => {
// 开始触发的时间
window.startTime = +new Date()
if (window.startTime - window.endTime >= delay || !window.endTime) {
fn()
window.endTime = window.startTime
}
}
开始触发的时间 减去 执行结束完的时间 大于等于 间歇时间就触发一次
首次不存在结束时间 所以加个 || 条件
// 需要执行的操作写在这个函数
const incident = () => {
console.log(1)
};
// 频繁被调用的函数 举了栗子 : scroll
const often = () => {
// 节流
throttle(incident, 500);
};
总结
以上都是比较简单粗暴的,根据不同场景使用吧