写一个js的防抖和节流

防抖和节流是优化前端性能的常用方法。防抖是指在一定时间内，只执行最后一次触发的事件，而节流是指在一定时间内，只执行一次触发的事件。下面是一个简单的实现：

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

// 节流
function throttle(fn, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
};
}

使用方法：

const debouncedFn = debounce(() => {
console.log('debounced');
}, 1000);

const throttledFn = throttle(() => {
console.log('throttled');
}, 1000);

// 触发事件
debouncedFn();
throttledFn();

相关问题

js防抖和节流

防抖和节流都是用来控制函数执行频率的方法。

防抖（debounce）：当事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计算时间。例如，在输入框中每次输入都会触发 onchange 事件，如果我们希望用户在停止输入 n 秒后再触发回调函数，可以使用防抖来实现。

节流（throttle）：每隔一段时间执行一次回调函数，比如滚动页面时每 200ms 执行一次函数。节流可以让函数在一定程度上平滑执行，减少函数调用的次数，从而提高性能。

下面是防抖和节流的 JavaScript 实现：

防抖：

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

节流：

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

使用方法：

function handleInput() {
  console.log("input changed");
}

const debouncedHandleInput = debounce(handleInput, 500);
const throttledHandleInput = throttle(handleInput, 500);

// 防抖
input.addEventListener("input", debouncedHandleInput);

// 节流
window.addEventListener("scroll", throttledHandleInput);

用js写一个防抖与节流

防抖和节流是前端开发中常用的性能优化方案。

防抖是指在事件触发后，等待一定时间再执行回调函数。如果在等待时间内再次触发事件，则重新计时，直到等待时间结束再执行回调函数。可以用于优化input输入、window.resize等事件的处理。代码如下：

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

节流是指在一定时间内只执行一次回调函数。可以用于优化scroll、mousemove等事件的处理。代码如下：

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