2

我正在尝试构建一个子网计算器作为我自己的个人项目来学习编程。我遇到问题的部分是我想呈现分类子网范围，例如 172.16.1.1/30 将呈现 16384 个子网...
172.16.0.0 - 172.16.0.3
172.16.0.4 - 172.16.0.7
172.16.0.8 - 172.16 .0.11
...等

所以当我把它写到一个网站上时，它会锁定浏览器几秒钟，并且花费的时间比我想象的要长。我进行了尽可能多的研究，发现输入“setTimeout”将有助于锁定和处理 B 类子网（使用 /32 时最大为 65536）。但是，当我进入数十万和数百万时，我仍然有问题。我创建了一个测试脚本来玩数字，看看有什么用。对此我很陌生，我没有想法。这是我的测试代码...

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>

</head>
<body>
    <div id="subnetRange" style="border : solid 2px #ff0000; background : #000000; color : #ffffff; padding : 4px; width : 250px; height : 350px; overflow : auto; "></div>

    <script type="text/javascript" src="pump.js"></script>
</body>
</html>

JAVASCRIPT：

var i = 0;
var myArray = new Array();
document.getElementById('subnetRange').innerHTML = "Loading...";   //carry on pumping?

function doCalculation()
{

   //Surrounding loop to break the time out up by 1000 increments
   for ( var x = 0; x < 2000; x++) {
     myArray[i] = i;
     i = i + 1;
     var percent_complete=i;
   }

   return percent_complete;
}

function pump()
{
   var percent_complete=doCalculation();
   if (percent_complete<100000)
   {
      //pump();
      setTimeout(pump, 1);
   }
   if (percent_complete >= 100000) {
      document.getElementById('subnetRange').innerHTML = myArray.join("<br />");   //carry on pumping?
   }
}


//setTimeout(pump, 1);
pump();

我希望我能提供足够的信息来提供帮助。如果没有，请询​​问，我会尽我所能为您提供信息。

谢谢

4

2 回答 2

1

您将计算拆分doCalculation为 2000 块，但是一旦数组的长度为 100000，您就可以

document.getElementById('subnetRange').innerHTML = myArray.join("<br />");

这是错误的方式。不填充数组是繁重的工作（发生在亚毫秒内），但 DOM 操作。你需要把它拆开，例如这样：

function pump() {
    var oldItemCount = myArray.length;
    var percent_complete = doCalculation();
    var newItems = myArray.slice(oldItemCount);
    document.getElementById('subnetRange').innerHTML += newItems.join("<br />");
    //                                               ^^^^^^^^^^^
    if (percent_complete < 100000) {
        setTimeout(pump, 1);
    }
}

（更新的演示）

注意上面的代码只是为了理解问题，可以做进一步的改进：newItems可能是 的返回值doCalculation，那么切片就变得不必要了。并且innerHTML +=实际上可能会减慢无法优化这一点的旧浏览器（它们序列化 DOM，进行字符串连接，并再次解析巨大的 HTML 字符串）。您可能需要找到一种更好的方法来附加小块 DOM 元素。

于 2013-07-02T22:53:25.693 回答
0

setTimeout 需要毫秒......也许将它从 1 增加到 25 或 35？

setTimeout(pump, 35);
于 2013-06-28T01:45:13.550 回答