【定时器】定时器存在的内存泄露问题

1. 定时器未及时清理

        如果页面中存在大量的定时器，且这些定时器没有被正确清理，这些定时器就会持续占用内存资源，导致内存泄漏。

问题描述

        比如当页面被销毁或组件被卸载时，若没有做清理定时器的操作，那定时器会仍然在运行，它会持有对回调函数的引用，阻止回调函数及其依赖的变量被垃圾回收。

        这种情况在单页面应用中尤为常见，因为页面的某些部分可能会频繁地加载和卸载。

示例

function setupTimer() {
  setTimeout(() => {
    console.log('This will still run even if the component is unmounted');
  }, 1000);
}

// 在组件加载时调用
setupTimer();

// 组件卸载时没有清理定时器

解决方法

        在组件或页面卸载时，使用 clearTimeout 及时清理定时器。

let timerId;

function setupTimer() {
  timerId = setTimeout(() => {
    console.log('This will run only if the component is still mounted');
  }, 1000);
}

function cleanupTimer() {
  clearTimeout(timerId); // 清理定时器
}

// 在组件加载时调用
setupTimer();

// 在组件卸载时调用
cleanupTimer();

2. 回调函数中的闭包

        如果回调函数中使用了闭包，可能会导致定时器一直占据着某个引用的外部变量，这个变量可能是一个大体积量的数据，或是一个大型 DOM 元素，这回阻止这些数据被垃圾回收。

问题描述

        注意，闭包的一个特性就是，在闭包内部引用的外部变量不会被垃圾回收机制回收。

        但是，使用闭包 ≠ 导致内存泄漏。

        然而，如果加上定时器，这样频繁的执行闭包函数，那么这个外部变量相当于一直被引用，若它是个大体积量数据，则会一直占据内存，导致内存泄漏。

示例

function setupTimer() {
  const largeData = new Array(1000000).fill('data'); // 大型数据
  setTimeout(() => {
    console.log(largeData.length); // 回调函数中引用了 largeData
  }, 1000);
}

setupTimer();

解决方法

        减少闭包中的引用：尽量减少回调函数中对大型对象或不必要的变量的引用。

        使用弱引用：如果可能，使用 WeakMap 或 WeakSet 来存储对对象的引用，避免阻止垃圾回收。

3. 重复设置定时器

        如果在短时间内多次调用 setTimeout，导致定时器数量不断增加，会占用更多内存。

window.addEventListener('scroll', () => {
  setTimeout(() => {
    console.log('Scroll event');
  }, 100);
});

解决方法

        使用防抖（Debounce）或节流（Throttle）：通过防抖或节流技术，限制事件处理函数的调用频率，避免频繁设置定时器。

        及时清理旧的定时器：在设置新的定时器之前，先清理旧的定时器。

let scrollTimer;

window.addEventListener('scroll', () => {
  clearTimeout(scrollTimer); // 清理旧的定时器
  scrollTimer = setTimeout(() => {
    console.log('Scroll event');
  }, 100);
});

4. 定时器使用的 DOM 元素被移除但未手动清理定时器

        如果定时器的回调函数引用某个 DOM 元素变量，且这个 DOM 元素变量是在外部定义的。

        若该 DOM 元素已经被移除，但定时器仍然存在，可能会由于闭包导致内存泄漏。

        这实际上还是因为通过闭包访问了外部 dom 元素变量导致的内存泄露。

示例

const element = document.createElement('div');
document.body.appendChild(element);

setTimeout(() => {
  console.log(element); // 回调函数中引用了 element
}, 1000);

document.body.removeChild(element); // 移除 DOM 元素

解决方法

        清理定时器：在移除 DOM 元素时，手动清理相关的定时器。

        引用 dom 时在函数内部重新定义并获取 dom：在回调函数中，通过选择器重新获取 DOM 元素，而不是直接引用外部变量，即阻止了闭包的引用。

const element = document.createElement('div');
document.body.appendChild(element);

let timerId = setTimeout(() => {
  const currentElement = document.querySelector('div'); // 重新获取 DOM 元素
  if (currentElement) {
    console.log(currentElement);
  }
}, 1000);

document.body.removeChild(element); // 移除 DOM 元素
clearTimeout(timerId); // 清理定时器

总结

        定时器导致的内存泄露的风险，可总结为下面三点：

        1. 定时器未及时清理，导致持续占用内存。

        2. 调用多个定时器导致定时器增加，内存占用增加。

        3. 定时器内部使用了闭包，导致持续占用内存。