setTimeout()如何导致JavaScript内存泄漏？怎样避免？

技术频道 - js技术

setTimeout()如何导致JavaScript内存泄漏？怎样避免？

作者:admin 时间:2022-6-21 20:4:47 浏览:3890

什么是JavaScript内存泄漏？它是如何产生的？我们该如何避免？在本文中，我将介绍计时器回调setTimeout()是如何导致JavaScript内存泄漏的，然后示例说明如何避免。

setTimeout()导致JavaScript内存泄漏

JavaScript中有两个计时事件，即 setTimeout() 和 setInterval()。前者在等待指定的毫秒数后执行一个函数，而后者周期性地执行一个函数（每隔一定的时间间隔重复一次）。

当任何对象绑定到计时器回调时，它不会被释放，直到超时发生。在这种情况下，计时器会自行重置并永远运行，直到超时完成，因为不允许垃圾收集器删除内存。这些计时器是 javascript 中内存泄漏的最常见原因。

例子

在以下示例中，计时器回调及其绑定对象（tiedObject）将在超时完成之前释放。与此同时，计时器会自行重置并永远运行，因此即使没有对原始对象的引用，它的内存空间也永远不会被收集。

<html>
<body>
<script>
   for (var i = 0; i < 100000; i++) {
   var tiedObject = {
   callAgain: function() {
      var text = this;
      var value = setTimeout(function() {
      text.callAgain();
      }, 100000);
   }
   }
   tiedObject.callAgain();
   tiedObject = null;
   }
</script>
</body>>
</html>

避免内存泄漏

1、为避免泄漏，在 setInterval() 或 setTimeout() 中提供引用，以便在执行垃圾回收之前需要执行函数。

2、一旦不再需要函数，就直接调用删除函数。

下面示例显示如何避免内存泄露

HTML

<p>Live Example</p>
<button onclick="delayedAlert();">Show an alert box after two seconds</button>
<p></p>
<button onclick="clearAlert();">Cancel alert before it happens</button>

JavaScript

var timeoutID;
delayedAlert();
 
function delayedAlert() {
  timeoutID = window.setTimeout(slowAlert, 2000);
}
 
function slowAlert() {
  alert("That was really slow!");
  clearAlert();
}
 
function clearAlert() {
  window.clearTimeout(timeoutID);
}