**防抖和节流的实现代码**

防抖函数的实现代码如下：

function debounce(fn, wait, immediate) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    if (immediate && !timer) {
      fn.call(this, args);
    }
    timer = setTimeout(() => {
      fn.call(this, args);
    }, wait);
  };
}

节流函数的实现代码如下：

function throttle(fn, wait) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

相关问题

js防抖和节流代码实现

JavaScript中的防抖（Debounce）和节流（Throttle）是处理函数频繁触发导致性能问题的常见技巧，它们的区别在于：

- **防抖（Debounce）**：当一个事件连续触发多次时，只有在最后一次触发后的一段时间内如果没有再次触发，才会执行回调函数。这是为了防止短期内连续的操作堆积在一起，只执行一次。

- **节流（Throttle）**：无论事件触发多少次，都会保证在一定时间间隔内只执行一次回调。这有助于限制函数执行频率，比如滚动事件，确保不会因为快速滚动而过于频繁地执行处理滚动的函数。

以下是简单的防抖和节流实现：

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

// 节流实现 (Throttle)
function throttle(func, delay) {
  let lastExec = Date.now();
  return function() {
    const context = this;
    const args = arguments;
    if (Date.now() - lastExec >= delay) {
      func.apply(context, args);
      lastExec = Date.now();
    }
  };
}

你可以像这样使用它们：

const throttledFunction = throttle(function toBeLimited() {
  console.log('This function is throttled');
}, 500); // 每隔500毫秒执行一次

const debouncedFunction = debounce(function toBeDebounced() {
  console.log('This function is debounced');
}, 300); // 只在最后一次触发后300毫秒内执行

防抖和节流代码

防抖和节流都是用来限制函数的执行频率，防止函数被频繁触发。

防抖：在函数需要连续触发多次时，只有最后一次操作才会被执行。比如搜索框输入联想，用户输入每个字符都会触发搜索，但是我们不希望每次输入都触发搜索，而是等待用户输入完成后再进行搜索。

代码实现：

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

调用方式：

function search() {
  // 模拟搜索操作
}

let debounceSearch = debounce(search, 500);
input.addEventListener('input', debounceSearch);

节流：在函数需要连续触发多次时，只有在一定时间间隔内才会执行一次。比如页面滚动时触发事件，我们不希望每次滚动都触发事件，而是等待一段时间后再执行一次。

代码实现：

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

调用方式：

function scroll() {
  // 模拟滚动操作
}

let throttleScroll = throttle(scroll, 500);
window.addEventListener('scroll', throttleScroll);