函数防抖与函数节流

前言

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

一、防抖是什么？

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

二、函数防抖实现

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