js防抖和节流代码示例，包括html和js

以下是 JavaScript 中的防抖和节流示例代码：

### 防抖

防抖是指在事件被触发n毫秒后再执行回调函数，如果在这n毫秒内又被触发，则重新计时。

**HTML:**

<button id="btn">点击</button>

**JavaScript:**

function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  }
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', debounce(() => {
  console.log('点击了按钮');
}, 1000));

### 节流

节流是指在一定时间内，只执行一次回调函数。如果在这一定时间内触发了多次，只有第一次触发会执行回调函数。

**HTML:**

<button id="btn">点击</button>

**JavaScript:**

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const currentTime = Date.now();
    if (currentTime - lastTime > delay) {
      func.apply(this, arguments);
      lastTime = currentTime;
    }
  }
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', throttle(() => {
  console.log('点击了按钮');
}, 1000));