jquery防抖节流

防抖和节流是一种常用的优化技术，用于控制事件的触发频率，提高页面性能和用户体验。

1. 防抖（Debounce）：事件触发多次，只执行最后一次。防抖的原理是设置一个定时器，在事件触发后延迟一段时间执行函数，如果在延迟时间内再次触发了事件，则清除之前的定时器重新设置新的定时器。这样可以确保只有最后一次触发事件后的延迟时间内没有再次触发事件，才会执行函数。

以下是使用jQuery实现防抖的示例代码：

function debounce(fn, delay) {
  let timerId;
  return function() {
    const args = arguments;
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(function() {
      fn.apply(this, args);
    }, delay);
  };
}

$(document).on('wheel', debounce(move, 1000));

上述代码中，`debounce`函数接受两个参数：要执行的函数`fn`和延迟时间`delay`。在事件触发时，会调用`debounce`函数返回的函数，该函数会在延迟时间内只执行一次传入的函数`fn`。

2. 节流（Throttle）：事件触发多次后，单位时间内只执行一次。节流的原理是设置一个标志位，在事件触发后立即执行函数，并将标志位设为false，然后在单位时间内如果再次触发事件，则不执行函数。直到单位时间过去后，将标志位设为true，再次触发事件时才会执行函数。

以下是使用jQuery实现节流的示例代码：

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

$(document).on('wheel', throttle(move, 1000));

上述代码中，`throttle`函数接受两个参数：要执行的函数`fn`和单位时间`delay`。在事件触发时，会调用`throttle`函数返回的函数，该函数会在单位时间内只执行一次传入的函数`fn`。