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;
    }
}