通用防抖和节流方式的实现

1.通用防抖函数方式的实现

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

这个函数接受两个参数：要执行的函数 func 和延迟时间 delay。它返回一个新函数，当这个新函数被调用时，它会先清除之前设置的定时器（如果有的话），然后设置一个新的定时器，在延迟时间 delay 后执行 func 函数。

2.通用的前端节流函数

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

这个函数接受两个参数：要执行的函数 func 和延迟时间 delay。它返回一个新函数，当这个新函数被调用时，它会检查上一次调用的时间是否距离现在的时间超过了延迟时间 delay，如果超过了就执行 func 函数并更新上一次调用的时间，否则什么都不做。

可以将这个节流函数用于一些事件处理函数中，以确保这些函数不会被频繁调用。比如，当用户滚动页面时，需要处理滚动事件，但是由于滚动事件非常频繁，可能会导致处理函数被频繁调用，从而影响页面性能。使用节流函数可以将滚动事件的处理频率限制在一定的范围内，以避免影响页面性能。