品鉴JS的魅力之防抖与节流【JS】

前言

小水一波，函数的防抖与节流。

文章目录

• • 前言
  • 介绍
  • 实现方式
  • • 防抖
    • 节流

介绍

防抖与节流的优化逻辑，在我们的日常开发中，有着一定的地位。

防抖和节流是两种常用的性能优化技术，用于限制某个函数在一定时间内被触发的次数,减少不必要的计算或操作，提高页面性能。

实现方式

在我们日常的工作开发中，我们更多的使用lodash库中的防抖与节流函数，但更多的分享，是了解代码的原理，为了方便不能使用第三方库的时候也能够自己手写去解决对应的需求问题。

防抖

• 代码原理：
  防抖的原理是确保一个函数在最后一次事件发生后延迟执行。如果在指定的延迟时间内再次触发事件，则重新计时。
• 代码实现：

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}

节流

• 代码原理：
  节流的原理是确保一个函数在指定的时间间隔内最多只执行一次。无论事件触发的频率如何，函数只在时间间隔的开始或结束时执行一次。
• 代码实现：

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}