手写防抖和节流,(附可导致内存泄漏的js代码)

最新推荐文章于 2024-08-25 13:14:30 发布

上铺的老家伙

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量256

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq1319504645/article/details/131662647

版权

文章介绍了前端开发中防抖和节流函数的用途，提供自定义实现示例，用于优化频繁触发的事件处理。同时，文章讨论了内存泄漏问题，通过一个代码示例展示如何因未正确清理元素和事件监听器导致内存泄漏，并提供了修复方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，防抖（Debounce）和节流（Throttle）函数同样是常用的技术，用于处理频繁触发的事件。下面是在前端中自己封装防抖和节流函数的示例代码：

1. 防抖函数：

防抖函数的作用是在触发事件后，等待一定时间后执行对应的函数，如果在等待时间内再次触发了该事件，则重新计时。

function debounce(func, wait) {
  let timeoutId;
  
  return function (...args) {
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

实际使用

function handleInput(inputText) {
  console.log("Handling input:", inputText);
}

const debouncedHandleInput = debounce(handleInput, 1500);  // 设置等待时间为1.5秒

// 模拟触发事件
debouncedHandleInput("First input");
setTimeout(() => {
  debouncedHandleInput("Second input");  // 不会立即执行
}, 1000);
setTimeout(() => {
  debouncedHandleInput("Third input");   // 1.5秒后执行
}, 2000);

2. 节流函数

节流函数的作用是在一定时间间隔内，稀释事件的触发频率，确保函数在指定时间间隔内最多只执行一次。

function throttle(func, wait) {
  let isThrottled = false;
  
  return function (...args) {
    if (isThrottled) return;
    
    isThrottled = true;
    
    func.apply(this, args);
    
    setTimeout(() => {
      isThrottled = false;
    }, wait);
  };
}

使用

function handleScroll(position) {
  console.log("Handling scroll at position:", position);
}

const throttledHandleScroll = throttle(handleScroll, 2000);  // 设置时间间隔为2秒

// 模拟触发事件
window.addEventListener("scroll", function () {
  throttledHandleScroll(window.scrollY);
});

看到这的小伙伴

写一段导致内存泄漏的代码

示例

function createLeak() {
  const element = document.createElement("div");

  // 添加事件监听器
  element.addEventListener("click", function() {
    console.log("Element clicked!");
  });

  // 将元素追加到文档中
  document.body.appendChild(element);
}

// 定期调用 createLeak 函数
setInterval(createLeak, 1000);

这段代码在每次调用createLeak函数时，会创建一个新的 <div> 元素，并将一个匿名函数作为点击事件的监听器绑定到元素上。然后，它将这个元素追加到文档的 <body> 中。在每次函数调用之后，会设置一个定时器，每秒钟调用一次createLeak函数。

问题在于，每次调用createLeak函数时，都会创建一个新的元素和对应的事件监听器。这意味着随着时间的推移，页面中会存在越来越多的元素和事件监听器，而这些元素和监听器都没有被正确地清理和释放。如果这个过程持续进行，就会导致内存泄漏，因为被创建的元素和监听器会占用越来越多的内存，而无法被垃圾回收机制回收。

为了避免内存泄漏，应该在不再需要元素和事件监听器时进行正确的清理。在这个例子中，可以在元素不再需要时，使用removeEventListener方法将事件监听器从元素上移除，以及使用removeChild方法将元素从文档中移除。

如何修复

示例:

function createLeak() {
  const element = document.createElement("div");

  element.addEventListener("click", function() {
    console.log("Element clicked!");
  });

  document.body.appendChild(element);

  // 清理函数
  function cleanup() {
    element.removeEventListener("click", handleClick);
    document.body.removeChild(element);
  }

  // 一段时间后执行清理
  setTimeout(cleanup, 5000);
}

setInterval(createLeak, 1000);

在修复后的代码中，添加了一个名为cleanup的清理函数。在每次创建元素时，会为该元素设置一个定时器，在一定时间后调用cleanup函数，以便正确地清理元素和事件监听器。在cleanup函数中，使用removeEventListener将事件监听器从元素上移除，并使用removeChild将元素从文档中移除。这样，不再需要的元素和事件监听器将被正确地清理和释放，避免了内存泄漏问题。

希望能对小伙伴们有用!!!