Open AnnGreen1 opened 4 months ago
本文作者为 360 奇舞团前端开发工程师 李武阳
防抖和节流是前端开发中常用的函数优化手段,它们可以限制函数的执行频率,提升性能和用户体验。主要用于处理高频触发的事件,例如:用户的滚动、输入、点击和表单的重复提交等。
防抖
节流
先简单描述下它们的作用
防抖:如果一个函数持续地、频繁地触发,那么只在它结束后过一段时间才开始执行。换句话说,如果你持续触发事件,那么防抖函数将不会执行,只有当你停止触发事件后,它才会在指定的延迟时间后执行。这对于防止例如用户在输入框中连续输入时发送过多的Ajax请求等情况非常有用。
节流:如果你持续触发事件,每隔一段时间,事件处理函数只执行一次。这有助于限制一些处理函数的执行频率,例如:滚动事件、窗口大小调整事件等。
简而言之,防抖是在事件停止触发后延迟执行函数,而节流是按照固定的时间间隔执行函数。
因为防抖和节流的作用和应用场景基本相同,也就导致它们容易被混淆。
防抖的应用场景:
实现防抖的基本方式是利用定时器,每次触发事件时都清除上一次的定时器,然后重新设置一个新的定时器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script> // 防抖函数 function debounce(func, wait) { let timeout; return function (...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; } // 使用防抖函数控制连续触发事件的处理函数执行频率 const debouncedHandler = debounce(() => { console.log('Debounced event triggered'); }, 500); document.getElementById('btn').addEventListener('click',debouncedHandler) </script> </body> </html>
节流的应用场景:
<!DOCTYPE html> <html lang="en">
概述
防抖
和节流
是前端开发中常用的函数优化手段,它们可以限制函数的执行频率,提升性能和用户体验。主要用于处理高频触发的事件,例如:用户的滚动、输入、点击和表单的重复提交等。防抖与节流的区别
先简单描述下它们的作用
防抖:如果一个函数持续地、频繁地触发,那么只在它结束后过一段时间才开始执行。换句话说,如果你持续触发事件,那么防抖函数将不会执行,只有当你停止触发事件后,它才会在指定的延迟时间后执行。这对于防止例如用户在输入框中连续输入时发送过多的Ajax请求等情况非常有用。
节流:如果你持续触发事件,每隔一段时间,事件处理函数只执行一次。这有助于限制一些处理函数的执行频率,例如:滚动事件、窗口大小调整事件等。
简而言之,防抖是在事件停止触发后延迟执行函数,而节流是按照固定的时间间隔执行函数。
因为
防抖
和节流
的作用和应用场景基本相同,也就导致它们容易被混淆。防抖的实现与使用
防抖的应用场景:
实现防抖的基本方式是利用定时器,每次触发事件时都清除上一次的定时器,然后重新设置一个新的定时器。
节流的实现与使用
节流的应用场景: