Question

我正在尝试构建一个子网计算器作为我自己的个人项目来学习编程。我遇到问题的部分是我想提出有类别的子网范围，示例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'将有助于锁定并处理ClassB子网（最大值为65536/32）。然而，当我进入数十万和数百万时，我仍然有问题。我创建了一个测试脚本来使用数字，看看有什么用。作为一个新手，我没有想法。这是我的测试代码......

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();

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

谢谢

Answer 1

你在2000年的块中分割doCalculation的计算，但是一旦数组的长度为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);
    }
}

（updated Demo）

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

Answer 2

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

setTimeout(pump, 35);

我用javascript循环向页面写了太多数据吗？

2 个答案: