0
点赞
收藏
分享

微信扫一扫

函数防抖与函数节流

GG_lyf 2022-02-28 阅读 197

前言

防抖与节流函数都是控制事件触发频率的函数,能够在某些场景实现性能优化。我直接弄个简单粗暴的。


一、防抖是什么?

      防抖是在指定时间内,如果连续触发当前事件,就不会执行该函数。直到指定时间内只触发一次的时候再执行。

二、函数防抖实现

        

/**
* @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);
};

总结

以上都是比较简单粗暴的,根据不同场景使用吧

举报

相关推荐

0 条评论