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);
}
结果展示
解释
示例中，在网页设置了两个简单的按钮，以触发 setTimeout() 和 clearTimeout() 方法：按下第一个按钮会设置一个定时器，定时器在 2s 后显示一个警告对话框，并将此次 setTimeout 的定时器 ID 保存起来，按下第二个按钮可以取消定时器。
返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。
需要注意的是 setTimeout() 和 setInterval() 共用一个编号池，技术上，clearTimeout() 和 clearInterval() 可以互换。但是，为了避免混淆，不要混用取消定时函数。
在同一个对象上（一个 window 或者 worker），setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。
总结
本文介绍了计时器回调setTimeout()是如何导致JavaScript内存泄漏的，然后示例说明如何避免。
什么是JavaScript内存泄漏？
内存泄漏可以定义为应用程序不再使用或需要的一块内存，但由于某种原因没有返回给操作系统。简单来说，它是永远等待使用的被遗忘的数据。
参考文章
标签: 内存泄漏 setTimeout
- 站长推荐
