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