技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

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

什么是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);
}

结果展示

 

demodownload

解释

示例中,在网页设置了两个简单的按钮,以触发 setTimeout()clearTimeout() 方法:按下第一个按钮会设置一个定时器,定时器在 2s 后显示一个警告对话框,并将此次 setTimeout 的定时器 ID 保存起来,按下第二个按钮可以取消定时器。

返回值timeoutID是一个正整数,表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。

需要注意的是 setTimeout()setInterval() 共用一个编号池,技术上,clearTimeout()clearInterval() 可以互换。但是,为了避免混淆,不要混用取消定时函数。

在同一个对象上(一个 window 或者 worker),setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。 

总结

本文介绍了计时器回调setTimeout()是如何导致JavaScript内存泄漏的,然后示例说明如何避免。

什么是JavaScript内存泄漏?

内存泄漏可以定义为应用程序不再使用或需要的一块内存,但由于某种原因没有返回给操作系统。简单来说,它是永远等待使用的被遗忘的数据。

参考文章

标签: 内存泄漏  setTimeout  
x
x
  • 站长推荐