用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;
    }
  };
}

相关问题

用js 写一个节流防抖

函数节流和函数防抖都是为了解决高频率触发事件时的性能问题。函数节流是指在一定时间内，只执行一次事件，而函数防抖是指在一定时间内，事件触发后，只有等待一段时间后未再次触发该事件，才执行事件处理函数。下面是用 JavaScript 实现函数节流和函数防抖的示例代码：

函数节流：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > delay) {
      func.apply(this, args);
      lastTime = nowTime;
    }
  };
}

function handle() {
  console.log('throttle');
}

window.addEventListener('scroll', throttle(handle, 1000));

函数防抖：

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

function handle() {
  console.log('debounce');
}

window.addEventListener('scroll', debounce(handle, 1000));

在这个示例中，我们分别使用了函数节流和函数防抖来优化了 window 的 scroll 事件的处理函数，当用户滚动页面时，每隔 1 秒执行一次函数节流的处理函数，或者等待 1 秒后再执行函数防抖的处理函数。这样可以有效降低事件处理函数的执行频率，优化页面性能。

请用javaScript写出防抖和节流函数

防抖函数：

function debounce(fn, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, wait);
  };
}

节流函数：

function throttle(fn, wait) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      fn.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), wait);
    }
  };
}