0
点赞
收藏
分享

微信扫一扫

函数防抖与函数节流

GG_lyf 2022-02-28 阅读 200

前言

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


一、防抖是什么?

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

二、函数防抖实现

        

/**
 * @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 条评论