节流(throttle)和防抖(debounce)是为了解决函数频繁触发而引发性能问题的两种优化方法。
节流: 指定一个时间间隔,在时间间隔内只执行一次函数,即在一段时间内,多次触发函数只执行一次。常见的应用场景如页面滚动、窗口大小调整等。
示例代码:
- function throttle(fn, delay) {
- let timer = null;
- return function () {
- const context = this;
- const args = arguments;
- if (!timer) {
- timer = setTimeout(() => {
- fn.apply(context, args);
- timer = null;
- }, delay);
- }
- };
- }
防抖: 指定一个时间间隔,在该时间间隔内重复触发函数时,只执行最后一次。常见的应用场景如输入框输入、搜索框输入等。
示例代码:
- function debounce(fn, delay) {
- let timer = null;
- return function () {
- const context = this;
- const args = arguments;
- clearTimeout(timer);
- timer = setTimeout(() => {
- fn.apply(context, args);
- }, delay);
- };
- }