介绍
前端节流(throttling)和防抖(debouncing)是两种常用的优化前端性能的技术。它们都用于控制事件的触发频率,减少不必要的计算和网络请求,提高页面的响应速度和用户体验。
节流
节流(throttling)是指在一定时间间隔内只触发一次事件。当事件频繁触发时,节流会忽略后续的事件,直到过了设定的时间间隔才再次触发事件。例如,当用户连续滚动页面时,节流可以限制滚动事件的触发频率,避免过多的滚动事件导致页面卡顿。常见的实现方式是使用定时器来延迟触发事件。
代码实现
1 | function throttle(func, ms) { |
防抖
防抖(debouncing)是指在事件触发后等待一段时间,如果在这段时间内没有再次触发事件,则执行相应的操作。如果在等待期间再次触发了事件,则重新计时。防抖通常用于处理用户输入的场景,比如输入框搜索建议、输入框自动保存等。防抖可以有效地减少频繁触发的事件对性能的影响。常见的实现方式是使用定时器,在事件触发时先清除之前的定时器,然后重新设置一个新的定时器。
代码实现
1 | function debounce(func, ms) { |