手写防抖和节流函数
timeout on t2 timer防抖（Debouncing）和节流（Throttling）是两种常用于处理频繁触发事件的前端优化技术。
防抖函数：
防抖的主要思想是在触发事件后，等待一定时间，如果在这段时间内没有再次触发事件，那么才执行相应的操作。
```javascript
function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
// 示例用法
const debouncedFunction = debounce(function() {
  console.log('Debounced function called');
}, 2000);
// 在某个事件上使用防抖
element.addEventListener('input', debouncedFunction);
```
在上述例子中，`debounce` 函数接受一个函数和一个延迟时间，返回一个新的函数。这个新函数在被调用时会设置一个定时器，如果在指定的延迟时间内再次调用该函数，则会清除之前的定时器，重新设置一个新的定时器。
节流函数：
节流的思想是在一定时间内，无论事件触发多少次，只执行一次相应的操作。
```javascript
function throttle(func, delay) {
  let canRun = true;
  return function() {
    if (!canRun) return;
    const context = this;
    const args = arguments;
    canRun = false;
    setTimeout(() => {
      func.apply(context, args);
      canRun = true;
    }, delay);
  };
}
// 示例用法
const throttledFunction = throttle(function() {
  console.log('Throttled function called');
}, 2000);
// 在某个事件上使用节流
element.addEventListener('scroll', throttledFunction);
```
在上述例子中，`throttle` 函数也接受一个函数和一个延迟时间，返回一个新的函数。这个新函数在被调用时会检查 `canRun` 标志，如果为 `true`，则执行相应的操作并将 `canRun` 设置为 `false`，防止在延迟时间内再次触发。在延迟时间结束后，再将 `canRun` 设置为 `true`，以便下次事件触发时可以执行相应的操作。
选择防抖还是节流取决于具体的应用场景，例如，在处理用户输入时通常会使用防抖，而在处理滚动事件时可能会使用节流。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。