关于 setInterval 和 setTimeout 结合使用，内存溢出的问题

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2464 days ago, the information mentioned may be changed or developed.

场景：要求一个柱状图柱子动态变化，将柱状图先正常渲染，渲染后执行下面的定时任务，先将值清空再重新赋值原来的值（这种无聊的变化是产品要求的。说动起来炫一点）。

问题：如果浏览器停留在此页面时候，内存正常（谷歌 F12-->Memory), 但是如果将浏览器切换到其他标签页（假如打开一个百度，停留在百度页），内存会一直增长，直至崩溃

代码：

this.intervalId = setInterval(() => {
	let {myCharts} = this
	let options = this.myCharts.getOption()
	let serData = JSON.parse(JSON.stringify(options.series))
    // 把所有数据清空
	for (let i = 0; i < serData.length; i++) {
		serData[i].data = null
	}
    myCharts.setOption({
    	series: serData
	})
	setTimeout(() => {
    	// 重新赋值
		myCharts.setOption({
			series: options.series
		})
	}, 800)
}, 6000)

在网上试了一个例子： https://echarts.baidu.com/examples/editor.html?c=gauge-car

在编辑框最下面改为

setInterval(function (){
    option.series[0].data[0].value = 0;
    option.series[1].data[0].value = 0;
    option.series[2].data[0].value = 0;
    option.series[3].data[0].value = 0;
    myChart.setOption(option,true);
    setTimeout(function() {
        
    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
    myChart.setOption(option,true);
        
    }, 800);
},2000);

打开 f12 切走页面看内存。

问：有知道原因的同学吗？我这边一开始想的是内存释放的问题，那页面激活和未激活为啥会不一样？

13 replies • 2019-08-20 09:46:57 +08:00