JavaScript 防抖代码

可以使用以下代码实现 JavaScript 防抖：

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

其中，func 是需要执行的函数，delay 是延迟时间。这段代码的作用是在 delay 时间内，如果有多次触发该函数，只执行最后一次触发的函数。

相关问题

javascript防抖

JavaScript 防抖是一种技术，用于限制在特定时间内连续触发的事件被多次执行。例如，当用户在输入框中连续输入时，可能会触发多次 keyup 事件。如果我们在 keyup 事件中执行了一些复杂的操作，则可能会导致性能问题。这时，我们可以使用防抖来解决这个问题。

防抖的原理是在事件触发后，延迟一定的时间执行相应的操作，如果在延迟的时间内又触发了相同的事件，则取消之前延迟的执行，重新开始计时。这样，在短时间内连续触发的事件，只会执行一次。

下面是一个简单的防抖函数的实现：

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

使用方法：

document.querySelector('input').addEventListener('keyup', debounce(function() {
  console.log('do something');
}, 1000));

在上面的代码中，我们将 debounce 函数用作事件监听器。每当用户在输入框中输入时，就会触发 keyup 事件。debounce 函数会延迟 1 秒（即 delay 参数的值）执行回调函数。如果在 1 秒内再次触发 keyup 事件，则取消之前的延

使用JavaScript写一个防抖代码

在 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 debouncedFunc = debounce(function() {
  console.log('Debounced function');
}, 1000);

// 触发 debouncedFunc
debouncedFunc();

// 在1s内触发多次 debouncedFunc，只会在1s之后输出一次
debouncedFunc();
debouncedFunc();
debouncedFunc();

防抖函数 debounce 接受两个参数：要进行防抖的函数 fn 和延迟的时间 delay。它返回一个新的函数，这个函数接受的参数和返回值和原函数 fn 一致。在返回的函数中，通过使用 setTimeout 和 clearTimeout 来控制函数的触发。如果在 delay 时间内多次调用返回的函数，那么 clearTimeout 将会清除之前的 setTimeout，并重新设置一个新的 setTimeout。这样就可以保证，在 delay 时间内多次调用返回的函数，只会在 delay 时间过后才会真正执行一次 fn 函数。