什么是节流

节流和防抖很类似，节流的核心思想是在一定的时间间隔内只执行一次函数。无论某个动作被触发多少次，在规定的时间间隔内，只会执行一次对应的函数。节流常用于滚动事件、鼠标移动事件等需要限制触发频率的场景中。

防抖和节流的主要区别在于时间控制上：防抖是等待一段时间后执行最后一次操作，而节流是在一定时间间隔内执行操作，不管触发了多少次事件。

手写节流

我们已经知道节流的思路就是控制处理函数在规定的时间内只执行一次，那么究竟是如何实现的呢？

那么下面是完整的节流实现代码：

javascript 复制代码

        function throttle(fn,delay){
            let prevTime = Date.now()
            return function(){
                //第二次点击时间 - 第一次 > delay
                if(Date.now() - prevTime > delay){
                    fn.apply(this,arguments)
                    prevTime = Date.now()
                }
            }
        }

依旧是分析上述的代码：

节流函数接受两个参数，fn是事件触发时真正需要调用的函数，也就是目标函数，delay代表函数执行的时间间隔。

prevTime变量用于记录上一次函数执行的时间戳，初始值为当前时间戳 。arguments是类数组，用于存储回调函数fn接受的不定参数。.apply(this) 显式地指定了函数 fn 的执行上下文，即调用防抖函数时的执行上下文，这样可以确保在防抖函数内部执行 fn 函数时，fn 函数中的 this 引用的是正确的对象。Date.now() - prevTime可以表示当前时间戳与上一次执行的时间戳之间的差值，用于判断是否执行函数。

那么节流代码的主要实现逻辑是什么？我将用一个实例让大家轻松理解！

javascript 复制代码

        let btn = document.getElementById('btn')
        function send() {
            console.log('提交了');
        }
        btn.addEventListener('click',throttle(send,1000))
        //节流逻辑
        function throttle(fn,delay){
            let prevTime = Date.now()
            return function(){
                //第二次点击时间 - 第一次 > delay
                if(Date.now() - prevTime > delay){
                    fn.apply(this,arguments)
                    prevTime = Date.now()
                }
            }
        }

上述代码实现的是对一个提交按钮进行节流优化。主要作用是防止用户短时间内点击多次button按钮

分析：

当用户点击button按钮，调用throttle函数，并传入两个参数，目标函数send和节流的时间间隔1000ms。 throttle函数会返回出一个闭包函数，保存了throttle内部声明的prevTime变量，所以当按钮被点击时，实际上会执行这个闭包函数，而不是send函数。

执行节流逻辑时，先判断当前时间与上一次执行函数的时间戳的差值是否大于指定的 delay。如果不大于，则不执行内部逻辑，实现了节流的效果。大于则调用传入的函数 fn，并更新 prevTime 为当前时间戳，用于后续判断。

与防抖类似，节流也要注意以下两点：

1. send函数的参数是不定的，所以用arguments类数组去保存send函数的参数。

2. send函数的this指向可能出问题，（如果是小白不了解this的绑定规则的话可以参考这篇文章：（JS）15分钟带你彻底跨越JS的一座大山--this），那么我们通过使用 apply 方法将 this 显式绑定到当前（闭包函数）上下文。

总结

防抖和节流的主要作用是在特定的事件处理场景中限制函数的执行频率，以提高性能、减少资源消耗，并改善用户体验。在开发中，根据具体的需求和事件特性，选择合适的防抖或节流策略可以帮助我们更好地优化代码性能。

那么手写防抖节流系列到这就结束了！

欢迎大家在评论区留言！

防抖和节流，你会手写吗？（下）

什么是节流

手写节流

总结