引言

【前端面试】 JavaScript 防抖（Debounce）及其运用（1）

在上一篇文章中我们讲到了实际开发过程中经常用到的一个技术防抖（Debounce），但是在处理控制事件频繁触发时通常还需要将防抖（Debounce）和节流（Throttle）结合使用，那么节流及其运用就是我们今天这篇文章要深入探讨和理解的主题：

JavaScript 节流（Throttle）的概念介绍

JavaScript 节流是一种优化技术，用于限制某些操作在一定时间间隔内的执行频率，以减少性能开销并提升用户体验。它可以确保一个函数不会在短时间内连续触发，而是在每隔一定时间段后执行一次。这种技术在处理诸如滚动事件、调整窗口大小等频繁触发的操作时非常有用。

节流在前端开发中的重要性和应用场景

在前端开发中，如今的 Web 应用通常需要处理大量的用户交互和事件响应。频繁触发的事件可能会导致性能问题，并影响用户体验。JavaScript 节流技术通过合理控制事件触发的频率，可以有效地优化性能，避免过多的计算和页面重绘，从而提升用户体验。

在本文中，我们将深入探讨 JavaScript 节流的实现原理、应用场景、注意事项

节流函数的实现

JavaScript 中的节流函数编写方法

在 JavaScript 中，实现节流可以通过闭包和定时器来完成。一种常见的实现方式是创建一个高阶函数，返回一个新的函数，该新函数在每次调用时设立一个定时器，在延迟时间内如果再次调用，则不会执行目标函数，直到定时器执行目标函数并重置定时器。

示例代码解释和分析

以下是一个简单的 JavaScript 节流函数的示例：

js 复制代码

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(){
                if(Date.now() - prevTime > delay){
                    fn.apply(this,arguments)
                    prevTime = Date.now()
                }
            }
        }

我们通过上述代码实现了一个简单的节流函数，用于限制提交按钮在一段时间内只能触发一次，比如当我们在一秒中疯狂点击提交按钮在一个时间段内也只会触发一次。

函数 throttle 接受两个参数：待节流的函数 fn 和延迟时间 delay。在 throttle 函数内部，通过记录上一次执行 fn 的时间戳 prevTime，在每次调用时判断当前时间和上一次执行的时间间隔是否超过 delay，如果超过则执行 fn，并更新 prevTime。

在代码中，btn 是一个按钮元素的引用，当点击按钮时会触发 send 函数。而在给按钮添加点击事件监听器时，使用了 throttle 函数来限制点击事件的触发频率，确保每次点击后都要等待至少 1000 毫秒才能再次触发。

节流的应用场景和注意事项

应用场景

JavaScript 节流在前端开发中有许多实际应用场景，其中最常见的包括：

滚动加载：当用户滚动页面时，触发滚动事件可能会频繁地加载内容。通过节流技术可以限制滚动事件的处理频率，避免过多的请求或计算，提高性能。
输入框实时搜索：在用户输入时实时进行搜索可能会导致大量的数据请求。使用节流可以限制搜索请求的发送频率，提升交互体验。
窗口大小调整：窗口大小调整事件可能会频繁触发，而相关的布局计算也会较为耗时。通过节流可以减少布局计算的次数，从而提高响应速度。

注意事项

在使用节流时，需要注意以下几点：

合理设置延迟时间：延迟时间的设置直接影响到节流的效果，太短可能无法起到预期的节流作用，太长又可能导致用户体验下降。需要根据具体场景和需求合理设置延迟时间。
理解业务需求：在应用节流时，需要充分理解业务需求，确保节流不会影响到关键操作的及时执行，从而影响用户体验。
综合考虑性能优化：节流是性能优化的一种手段，但需要与其他优化策略（如防抖、懒加载等）结合使用，综合考虑性能提升的效果。

综上所述，JavaScript 节流在前端开发中有诸多应用场景，同时也需要注意合理设置延迟时间、理解业务需求以及综合考虑性能优化的策略。

节流与防抖的区别和选择

区别

在 JavaScript 中，节流和防抖都是用来控制事件频繁触发的技术，但它们的应用场景和处理方式略有不同：

节流：节流的主要作用是减少连续事件的触发频率，例如限制滚动事件、resize 事件的触发频率，从而减少事件处理的次数。通过设置一个时间间隔，在这个时间间隔内只执行一次事件处理函数。
防抖：防抖的主要作用是防止短时间内多次触发同一事件，例如输入框实时搜索场景中，防止用户输入过程中频繁发送请求。通过设置一个延迟时间，在延迟时间内如果事件再次被触发，则重新计时，直到延迟时间内事件不再被触发才执行事件处理函数。

选择

在实际应用中，选择使用节流还是防抖取决于具体的业务场景和需求：

节流的选择 ：当需要对连续事件进行控制，以减少事件处理的频率时，适合选择节流。比如滚动加载、窗口大小调整等场景。
防抖的选择 ：当需要防止短时间内多次触发同一事件，避免频繁的请求或计算时，适合选择防抖。比如输入框实时搜索、按钮防止重复点击等场景。

综上所述，节流和防抖在应用场景和处理方式上略有不同，需要根据具体业务需求来选择使用哪种技术。

总结

在实际Web应用开发工程中，不管是防抖还是节流都是应用很广泛的技术，通过这两次的文章内容我们了解了节流和防抖两门技术，他们就像是密不可分的搭档，再处理经常发生的实际应用开发问题中，合理结合使用他们会让效果事半功倍。

到这里我们今天的文章就结束了，喜欢的小伙伴的可以点赞＋关注，作者后续会持续更新类似干货文章。

感谢大家的阅读，点点赞吧♥

如果想了解更多有用的干货，关注➕收藏面试不迷茫

博主的开源Git仓库: gitee.com/cheng-bingw...

【前端面试】 JavaScript 节流（Throttle）及其运用（2）

引言