setInterval延时为Infinity
现象
windows 和 linux 系统网页挂载svg文件，出现cpu占比逐步增加的情况，时间过长后会发现页面浏览操作变得卡顿，鼠标事件响应变得很慢。最后可能导致系统崩溃。
原因
因为代码是由外包人员编写，因此找错的过程变得比较复杂，最终定位到以下的代码：
const timeLine = sureMinTime();
timeLine > 0 && setInterval(() => {
lineChartT();
}, timeLine * 1000);
function sureMinTime() {
let node = document.rootElement || document.getElementsByTagName("svg")[0];
let nodeAction = node.querySelectorAll("g[TypeName = 'chartT']");
let arr = [];
nodeAction.forEach(e => {
//...
arr.push(((end - start) / Math.max(...arrMiddle)).toFixed(3) - 0);
})
return Math.min(...arr) || 0;
}
问题出在 return Math.min(...arr) || 0; 这句代码上。当arr的数组长度为0时，Math.min(...[]) 返回的结果是 Infinity。而 Infinity || 0 返回的也是 Infinity。Infinity > 0返回 true, 且 Infinity * 1000依旧是Infinity(正无穷大)。
setTimeout/setInterval delay数值过大问题,如果 delay 是 Infinity 值，非数字（NaN）值或负值，则将超时设置为零，因此导致上面的定时器无延迟立即执行（这个是问题的根本原因）。
修改
function sureMinTime() {
let node = document.rootElement || document.getElementsByTagName("svg")[0];
let nodeAction = node.querySelectorAll("g[TypeName = 'chartT']");
let arr = [];
nodeAction.forEach(e => {
//...
arr.push(((end - start) / Math.max(...arrMiddle)).toFixed(3) - 0);
})
if (arr.length && Math.min(...arr) > 0) {
return Math.min(...arr) || 0;
} else {
return 0;
}
}
发表评论 (审核通过后显示评论)：