js防抖和节流

区别：

防抖和节流都是为了解决频繁触发事件而导致性能问题的问题，但它们的实现方式和效果不同。

防抖：在一定时间内，如果事件被触发多次，只执行最后一次。也就是说，如果在规定时间内事件被触发多次，只有最后一次触发的事件会被执行。防抖的实现方式是使用setTimeout函数，每次触发事件时都会清除之前的定时器，重新设置一个新的定时器。

节流：在一定时间内，无论事件被触发多少次，只执行一次。也就是说，如果在规定时间内事件被触发多次，只有第一次触发的事件会被执行。节流的实现方式是使用setTimeout函数，每次触发事件时都会判断是否已经过了规定的时间，如果过了就执行事件，否则不执行。

总的来说，防抖和节流都是为了优化性能，但它们的实现方式和效果不同，需要根据具体的场景选择合适的方法。

使用场景：

防抖和节流的使用场景如下：

防抖：

1. 搜索框输入联想：用户在输入搜索关键字时，每输入一个字母就会触发搜索请求，这时可以使用防抖来减少请求次数，只有用户停止输入一段时间后才会触发搜索请求。

2. 窗口大小改变：当窗口大小改变时，会触发resize事件，如果频繁改变窗口大小，会导致浏览器性能问题，这时可以使用防抖来减少resize事件的触发次数。

3. 按钮点击：当用户频繁点击按钮时，可以使用防抖来避免重复提交表单或者重复执行某个操作。

节流：

1. 滚动加载：当用户滚动页面时，会触发scroll事件，如果频繁触发scroll事件，会导致页面卡顿，这时可以使用节流来减少scroll事件的触发次数。

2. 鼠标移动：当用户移动鼠标时，会触发mousemove事件，如果频繁触发mousemove事件，会导致页面卡顿，这时可以使用节流来减少mousemove事件的触发次数。

3. 定时器：当需要定时执行某个操作时，可以使用节流来控制定时器的触发次数，避免过于频繁的执行操作。

示例代码：

防抖的示例代码：

```javascript
function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

// 使用示例
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', debounce(function() {
  // 处理搜索逻辑
}, 500));
```

节流的示例代码：

```javascript
function throttle(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

// 使用示例
window.addEventListener('scroll', throttle(function() {
  // 处理滚动逻辑
}, 500));
```

powerd by open ai