JavaScript防抖与节流

**JavaScript防抖与节流**

在 JavaScript 中，函数防抖（debouncing）和函数节流（throttling）是两个常见的性能优化技术。它们可以帮助我们减少不必要的函数调用，从而提高应用程序的性能。

### 函数防抖函数防抖是一种机制，它会在一定时间内，连续触发多次事件时，只执行最后一次事件对应的函数。也就是说，如果在短时间内连续触发了多个事件，我们只会执行最后一个事件对应的函数。

#### 实现函数防抖我们可以使用以下代码来实现函数防抖：

javascriptfunction debounce(func, wait) {
 let timeoutId = null;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => {
 func.apply(this, args);
 }, wait);
 };
}

在这个例子中，我们定义了一个 `debounce` 函数，它接受两个参数：`func`（要执行的函数）和 `wait`（等待时间）。我们使用 `setTimeout` 来实现防抖效果。

#### 使用示例下面是一个使用示例：

javascriptfunction search() {
 console.log('Searching...');
}

const debouncedSearch = debounce(search,500);

// 连续触发两次事件debouncedSearch();
debouncedSearch();

// 等待600ms 后，最后一次事件对应的函数会被执行

在这个例子中，我们定义了一个 `search` 函数，然后使用 `debounce` 函数来实现防抖效果。我们连续触发两次事件，但只有最后一次事件对应的函数会被执行。

### 函数节流函数节流是一种机制，它会在一定时间内，连续触发多次事件时，只执行第一次事件对应的函数。也就是说，如果在短时间内连续触发了多个事件，我们只会执行第一次事件对应的函数。

#### 实现函数节流我们可以使用以下代码来实现函数节流：

javascriptfunction throttle(func, wait) {
 let timeoutId = null;
 return function(...args) {
 if (timeoutId === null) {
 func.apply(this, args);
 timeoutId = setTimeout(() => {
 timeoutId = null;
 }, wait);
 }
 };
}

在这个例子中，我们定义了一个 `throttle` 函数，它接受两个参数：`func`（要执行的函数）和 `wait`（等待时间）。我们使用 `setTimeout` 来实现节流效果。

#### 使用示例下面是一个使用示例：

javascriptfunction search() {
 console.log('Searching...');
}

const throttledSearch = throttle(search,500);

// 连续触发两次事件throttledSearch();
throttledSearch();

// 等待600ms 后，第一次事件对应的函数会被执行

在这个例子中，我们定义了一个 `search` 函数，然后使用 `throttle` 函数来实现节流效果。我们连续触发两次事件，但只有第一次事件对应的函数会被执行。

### 总结函数防抖和函数节流是两个常见的性能优化技术，它们可以帮助我们减少不必要的函数调用，从而提高应用程序的性能。在本文中，我们分别介绍了函数防抖和函数节流的实现原理、代码示例以及使用示例。