掌握前端性能优化的秘密武器：深入解析JavaScript节流技术

前言

在上一篇文章中我们讲到了防抖函数，这是一个在开发中十分常见且重要的函数。这一次我们要开始讲它另一个好伙伴------节流！

什么是节流？

节流是一种前端优化技术，用于控制函数在一定时间内被调用的频率，确保函数不会以超过指定的时间间隔过快地连续调用。节流的目的是减少函数执行的频率，避免过于频繁的操作导致性能问题。

节流的应用场景

滚动事件处理：在处理滚动事件时，防止因为用户快速滚动而导致事件处理函数过于频繁地执行。

窗口大小调整：当用户调整浏览器窗口大小时，限制事件处理函数的执行频率，确保在一定时间内只执行一次。

输入框输入：在处理输入框输入事件时，避免每次按键都触发处理函数，而是在用户停止输入一段时间后再执行。

如何实现节流

下面我们来通过案例分析：

// 获取id为'btn'的按钮元素
let btn = document.getElementById('btn');
// 定义一个函数 send，用于模拟提交操作
function send() {
    console.log('提交了');
}
// 通过事件监听给按钮添加点击事件，使用节流函数 throttle 包装 send 函数
btn.addEventListener('click', throttle(send, 1000));
// 定义节流函数 throttle
function throttle(fn, delay) {
// 使用 Date.now() 获取当前时间戳，将其赋给 prevTime
    let prevTime = Date.now();
    return function () {
        if (Date.now() - prevTime > delay) {
            fn.apply(this, arguments);
            prevTime = Date.now();
        }
    };
}

我们来分析这个案例中的代码：

btn.addEventListener('click', throttle(send, 1000));

使用addEventListener给按钮添加了一个点击事件监听器。当按钮被点击时，调用throttle函数，将send函数和节流的延迟时间（1000毫秒）作为参数传入。

    let prevTime = Date.now(); 

使用Date.now()获取当前时间戳，将其赋给prevTime。这个变量用于追踪上一次节流函数调用的时间。

function throttle(fn, delay) {
// 使用 Date.now() 获取当前时间戳，将其赋给 prevTime
    return function () {
        if (Date.now() - prevTime > delay) {
            fn.apply(this, arguments);
            prevTime = Date.now();
        }
    };
}

在返回的函数内部，它检查自上一次调用prevTime以来经过的时间是否大于指定的delay。如果是，就使用 fn.apply(this, arguments)调用原函数fn，并更新prevTime为当前时间戳。

节流的工作流程

1.初始化：在节流函数被调用时，初始化一个变量prevTime为当前时间戳，用于追踪上一次函数调用的时间。

2.时间间隔检查：计算当前时间与上一次函数调用的时间间隔：Date.now() - prevTime。

3.判断是否执行原函数：如果时间间隔大于等于设定的延迟时间（delay），则执行原函数。如果时间间隔小于延迟时间，忽略这次调用，不执行原函数。

4.更新时间戳：如果原函数被执行，更新prevTime为当前时间戳，表示这次函数调用的时间。

总结

虽然节流函数让我们在开发中更加方便，但是它也有一些不足，比如如果在两次触发之间的时间间隔内频繁触发事件，可能会导致一些事件被丢失。

感谢您的阅读，点赞关注作者更新更多后续