防抖和节流

2023-12-29 20:12:00

防抖(Debounce)是一种在处理频繁触发的事件时,延迟执行函数的技术。它能够确保只有在一连串事件结束后,才执行一次函数。以下是一个简单的 JavaScript 防抖函数的实现:

function debounce(func, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例用法:
function handleInput() {
  console.log("Input event triggered");
}

const debouncedHandleInput = debounce(handleInput, 500);

// 模拟输入事件的调用
debouncedHandleInput(); // 不会立即执行
debouncedHandleInput(); // 不会立即执行
debouncedHandleInput(); // 不会立即执行

// 等待 500 毫秒后,handleInput 执行一次

在上述例子中,debounce 函数接受一个要防抖的函数 func 和一个延迟时间 delay。返回的函数(这里是 debouncedHandleInput)可以安全地被频繁触发,但是实际执行 func 函数的调用会被推迟到最后一次调用后的 delay 毫秒。

请注意,防抖函数返回的函数使用了 apply 来确保函数在执行时具有正确的上下文(this)。另外,防抖函数还使用了闭包来保持对 timer 的引用,以便能够清除上一个定时器并设置新的定时器。

节流(Throttle)是一种限制函数在一定时间间隔内执行的技术,确保函数不会以太高的频率执行。以下是一个简单的 JavaScript 节流函数的实现

function throttle(func, delay) {
  let lastExecTime = 0;
  let timeoutId;

  return function (...args) {
    const now = Date.now();

    if (now - lastExecTime < delay) {
      clearTimeout(timeoutId);

      timeoutId = setTimeout(() => {
        lastExecTime = now;
        func.apply(this, args);
      }, delay);
    } else {
      lastExecTime = now;
      func.apply(this, args);
    }
  };
}

// 示例用法:
function handleScroll() {
  console.log("Scroll event triggered");
}

const throttledHandleScroll = throttle(handleScroll, 200);

// 模拟滚动事件的调用
throttledHandleScroll(); // 第一次会立即执行
throttledHandleScroll(); // 在 200 毫秒内不会执行
throttledHandleScroll(); // 在 200 毫秒内不会执行

// 200 毫秒后,handleScroll 执行一次

在上述例子中,throttle 函数接受一个要节流的函数 func 和一个时间间隔 delay。返回的函数(这里是 throttledHandleScroll)可以被调用,但是实际执行 func 函数的调用会被限制在时间间隔内。

请注意,节流函数使用了闭包来保持对 lastExecTimetimeoutId 的引用。Date.now() 用于获取当前时间戳,以便比较上一次执行函数的时间。如果在时间间隔内再次触发,会清除之前的定时器并设置一个新的定时器来延迟执行。如果在时间间隔外触发,会立即执行并更新 lastExecTime

文章来源:https://blog.csdn.net/m0_47999208/article/details/135296307
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。