9、实现节流函数和防抖函数 · 大厂前端面试真题

>[danger]实现节流函数和防抖函数 >[info]建议回答 - 节流：是在每个时间段里，最多只允许运行一次。比如说resize调整窗口，在调整窗口的过程中，事件一直在高频率的触发，可以利用节流函数让其在一定的间隔时间段内最多触发一次。 - 防抖：在高频调用中，只有足够的空闲时间，代码才会执行一次，常见的就是input的change事件，只有停顿输入的事件大于指定的时间，代码才会执行一次。 >[info]技术详解 JavaScript 节流（throttle）和防抖（debounce）是两种常见的前端性能优化技术，用于限制一些高频率的操作或事件的执行次数。 ## 节流节流是指在一定时间内只执行一次某个操作或事件。通过节流机制，可以有效地限制高频率操作或事件的执行次数，从而减轻浏览器的负担、提升页面性能和用户体验。 ### 应用场景节流适用于以下场景： * 窗口调整、滚动等事件的处理。 * 频繁的输入框输入验证。 * 鼠标移动、拖拽等事件的处理。 ### 实现方式常见的实现方式包括时间戳和定时器两种方式。 1. 时间戳方式：记录上一次执行的时间戳，当当前时间戳 - 上一次执行的时间戳 >= 指定时间间隔时，才执行相应的操作或事件；否则不执行。代码如下： ``` function throttle(func, wait) { let lastTime = 0; return function() { const context = this; const args = arguments; const currentTime = +new Date(); if (currentTime - lastTime > wait) { func.apply(context, args); lastTime = currentTime; } }; } ``` 2. 定时器方式：使用定时器控制函数的执行次数，在指定时间间隔内，如果有多个操作或事件被触发，则只执行最后一次操作或事件。代码如下： ``` function throttle(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(function() { func.apply(context, args); timeout = null; }, wait); } }; } ``` ## 防抖防抖是指在一定时间内，只有最后一次操作或事件才会被执行。通过防抖机制，可以限制连续快速的操作或事件的执行次数，从而减少浏览器的计算量、提升页面性能和用户体验。 ### 应用场景防抖适用于以下场景： * 搜索框输入联想。 * 频繁的点击或提交操作。 * 窗口大小调整、滚动等事件的处理。 ### 实现方式防抖的实现方式与节流类似，也有时间戳和定时器两种方式。 1. 时间戳方式：记录上一次执行的时间戳，当当前时间戳 - 上一次执行的时间戳 >= 指定时间间隔时，才执行相应的操作或事件；否则重新计时。代码如下： ``` function debounce(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; const currentTime = +new Date(); if (timeout) clearTimeout(timeout); if (currentTime - lastTime > wait) { func.apply(context, args); lastTime = currentTime; } else { timeout = setTimeout(function() { func.apply(context, args); }, wait); } }; } ``` 2. 定时器方式：使用定时器控制函数的执行，在指定时间间隔内，如果有多个操作或事件被触发，则只执行最后一次操作或事件。代码如下： ``` function debounce(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; } ``` ## 总结 JavaScript 节流和防抖是常见的前端性能优化技术，可以有效地限制高频率操作或事件的执行次数，从而提升页面性能和用户体验。节流和防抖的实现方式较为相似，常见的包括时间戳方式和定时器方式。应用场景也有所不同，节流适用于窗口调整、输入框输入验证等场景，而防抖适用于搜索框联想、点击提交等场景。在实际开发中，可以根据具体场景选择合适的优化技术，提升页面性能和用户体验。 >参考链接 [链接](https://www.html5iq.com/frontend/601cac123a5920292e6f94a0)