gpt4 book ai didi

javascript - Jquery/Javascript 内存泄漏

转载 作者:行者123 更新时间:2023-11-30 15:51:52 25 4
gpt4 key购买 nike

我有一个网络应用程序,它每 10 秒显示一次图表并更新一次图表状态。

HTML 是:

<div id="hoze-bar-chart"></div>

绘制图表的JS:

var handleStackedChart = function() {
"use strict";

function v(e, t, n) {
$('<div id="tooltip" class="flot-tooltip">' + n + "</div>").css({
top: t,
left: e + 35
}).appendTo("body").fadeIn(200);
}
var e = displaycount.e;
var n = displaycount.n;
var h = displaycount.h;

var p = {
xaxis: {
tickColor: "transparent",
ticks: h
},
yaxis: {
tickColor: "#ddd",
ticksLength: 10
},
grid: {
hoverable: !0,
tickColor: "#ccc",
borderWidth: 0,
borderColor: "rgba(0,0,0,0.2)"
},
series: {
stack: null,
lines: {
show: !1,
fill: !1,
steps: !1
},
bars: {
show: !0,
barWidth: .5,
align: "center",
fillColor: null
},
highlightColor: "rgba(0,0,0,0.8)"
},
legend: {
show: !0,
labelBoxBorderColor: "#ccc",
position: "ne",
noColumns: 1
}
};
var d = [{
data: e,
color: green,
label: displaycount.totalTitle,
bars: {
fillColor: green
}
}, {
data: n,
color: red,
label: displaycount.offlineTitle,
bars: {
fillColor: red
}
}];

$.plot("#hoze-bar-chart", d, p);

var m = null;
var g = null;
$("#hoze-bar-chart").bind("plothover", function(e, t, n) {
if (n) {
if ($(document).width() >= 1024 && $(document).width() < 1680)
$("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataIndex + ")").show();

var r = n.datapoint[1] - n.datapoint[2];
if (m != n.series.label || r != g) {
m = n.series.label;
g = r;

if ($(document).width() >= 1024 && $(document).width() < 1680)
$("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataIndex + ")").hide();

$("#tooltip").remove();
v(n.pageX, n.pageY, r + " " + n.series.label);
}

//Free Memory
r = null;

} else {
if ($(document).width() >= 1024 && $(document).width() < 1680)
$("#hoze-bar-chart .flot-x-axis .flot-tick-label").hide();
$("#tooltip").remove();
}
})

//Free Memory
e = null;
n = null;
h = null;
displaycount.e = null;
displaycount.n = null;
displaycount.h = null;
displaycount.totalTitle = null;
displaycount.offlineTitle = null;
p = null;
d = null;
m = null;
g = null
};

首先调用图表函数的 JS,每 10 秒调用一次:

var Dashboard = function() {
"use strict";
return {
init: function() {
handleStackedChart();
handleLiveUpdatedChart();
}
}
}()

var handleLiveUpdatedChart = function() {
"use strict";
var listenerAjaxRequest = {};
listenerAjaxRequest.readyState = 4;
function e() {
if( listenerAjaxRequest.readyState != 1)
{
listenerAjaxRequest = $.ajax({
type: "get",
url: "PHP_FILE_PATH",
cache: false,
dataType: "json",
success: function (response) {
displaycount.h = response.displyCountArray.titleData;
displaycount.e = response.displyCountArray.onlineData;
displaycount.n = response.displyCountArray.offlineData;
handleStackedChart();

displaycount.h = null;
displaycount.e = null;
displaycount.n = null;
}
});
}
}
};

我第一次运行此网站浏览器获得 235MB 内存,但 10 分钟后我看到浏览器获得 255MB 内存并且此页面每天打开 12 小时并且浏览器崩溃,因为我在页面上有 10 个图表并且每 10 分钟浏览器获得 100MB内存。

如果我评论运行 handleLiveUpdatedChart() 这个问题将会解决,但我需要定期更新数据。

此时我需要知道如何处理内存并解决这个问题。

最佳答案

您可以做几件事:

  1. handleStackedChart 函数之外定义 v 函数。您不必在每次函数调用时重新定义它。如果 v 函数被多次调用,为了生成一个元素,请使用 DOM API 而不是使用 jQuery。请注意,函数调用是昂贵的。

  2. handleStackedChart 函数之外定义 p 对象,并且只更新它的变量属性,例如:p.xaxis.ticks = h;

  3. 您目前正在添加一个新的监听器到每个handleStackedChart 调用的#hoze-bar-chart。当事件被触发时,元素的所有事件监听器都会被调用,仅此一项就可以使浏览器崩溃。此外,您可以缓存 $(document).width() 的结果并重新使用它,而不是一次又一次地调用该函数。

  4. 不要使用间隔,而是使用 setTimeout 函数。当请求完成并重新绘制图表时,设置新的超时。

关于javascript - Jquery/Javascript 内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39201560/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com