JavaScript和HTML上的大量数据导致XAMPP中的“页面无响应”对话框

Question

I have to write a program using PHP, HTML, and JavaScript. 我必须使用PHP，HTML和JavaScript编写程序。 The program must generate 1 Million random license plates and display them in a text field. 该程序必须生成100万个随机车牌并将其显示在文本字段中。 Also the program should keep track of plates per province. 该程序还应跟踪每个省的车牌数。 I used the script below, but when I try to generate more than 10000, I get a "Page unresponsive" dialogue in XAMPP. 我使用了下面的脚本，但是当我尝试生成超过10000个脚本时，在XAMPP中出现“页面无响应”对话框。 I am wondering if there isn't a simpler way to do this? 我想知道是否有更简单的方法来做到这一点？ Thank you! 谢谢！

<html>
    <head>
        <title>Form generate licence plates</title>
<script language="javascript" type="text/javascript">
//The letters available for use.
arrLetters = ['B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'V', 'W', 'X', 'Z']
//The province codes available for use.
arrProvCode = ['CA', 'ZN', 'MP', 'EC', 'L', 'GP', 'NC', 'FS', 'NW']
arrGenLetters = []
arrGenNumbers = []
arrGenNumberPlates=[]
var GenProvCode = ""; //The random generated province code

var countCA = 0;
var countZN = 0;
var countMP = 0;
var countEC = 0;
var countL = 0;
var countGP = 0;
var countNC = 0;
var countFS = 0;
var countNW = 0;


function GenerateAndAddtext() 
{
//Repeat 1M times.
for(k=0; k<1000000; k++)
{
    //Generate 3 random letters & add to array.
    for(j=0; j<3; j++)
    {
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
    }   
    //Generate 3 random numbers & add to array.
    for(i=0; i<3; i++)
    {
    var min=0; 
    var max=9;  
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[i] = randomNumber2;
    }   
    //Generate the random province code.
    var min=0; 
    var max=9;  
    var randomNumber3 = Math.floor(Math.random() * (+max - +min)) + +min; 
    var GenProvCode = arrProvCode[randomNumber3];
    //Count the province codes per province.
    if(GenProvCode == "CA")
    {
        ++countCA
    }
    if(GenProvCode == "ZN")
    {
        ++countZN
    }
    if(GenProvCode == "MP")
    {
        ++countMP
    }
    if(GenProvCode == "EC")
    {
        ++countEC
    }
    if(GenProvCode == "L")
    {
        ++countL
    }
    if(GenProvCode == "GP")
    {
        ++countGP
    }
    if(GenProvCode == "NC")
    {
        ++countNC
    }
    if(GenProvCode == "FS")
    {
        ++countFS
    }
    if(GenProvCode == "NW")
    {
        ++countNW
    }

    arrGenNumberPlates[k] = arrGenLetters[0] + arrGenLetters[1] + arrGenLetters[2] + "-" + arrGenNumbers[0] + arrGenNumbers[1] + arrGenNumbers[2] + "-" +GenProvCode;
    }

    for(v=0; v<1000000; v++)
    {
    document.OutputForm.GeneratedPlates.value += arrGenNumberPlates[v]+ "\n";
    }

    document.OutputForm.Gauteng.value = countGP;
    document.OutputForm.Mpumalanga.value = countMP;
    document.OutputForm.Limpopo.value = countL;
    document.OutputForm.WesternCape.value = countCA;
    document.OutputForm.KwaZuluNatal.value = countZN;
    document.OutputForm.EasternCape.value = countEC;
    document.OutputForm.FreeState.value = countFS;
    document.OutputForm.NorthenCape.value = countNC;
    document.OutputForm.NorthWest.value = countNW;

}
</script>
        </head>
        <body>
        <form name="OutputForm">
        <input type="button" value="Generate" onClick="GenerateAndAddtext();"><br>
        <textarea name="GeneratedPlates" cols="80" rows="30"></textarea><br>
        <label>Gauteng<input type="text" name="Gauteng"></label><br>
        <label>Mpumalanga<input type="text" name="Mpumalanga"></label><br>
        <label>Limpopo<input type="text" name="Limpopo"></label><br>
        <label>Western Cape<input type="text" name="WesternCape"></label><br>
        <label>KwaZulu-Natal<input type="text" name="KwaZuluNatal"></label><br>
        <label>Eastern Cape<input type="text" name="EasternCape"></label><br>
        <label>Free State<input type="text" name="FreeState"></label><br>
        <label>Northen Cape<input type="text" name="NorthenCape"></label><br>
        <label>North West<input type="text" name="NorthWest"></label><br>
        </form>
        </body>
    </html>

Answer 1

You should minimize the amount of processes as below: 您应尽量减少以下过程：

1 - Remove the variable definition into your for loop. 1-将变量定义删除到您的for循环中。 You don't have to set it in every loop. 您不必在每个循环中都进行设置。 Just set it once before the loop. 只需在循环前设置一次即可。

From 从

for(j=0; j<3; j++)
{
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}

To 至

var min=0; 
var max=20; 
for(j=0; j<3; j++)
{ 
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}

2 - Remove duplicated loop when there is no reason to do it. 2-在没有理由的情况下删除重复的循环。 For this purpose create 2 max variables. 为此，创建2个max变量。

From 从

//Generate 3 random letters & add to array.
for(j=0; j<3; j++)
{
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}
//Generate 3 random numbers & add to array.
for(i=0; i<3; i++)
{
    var min=0; 
    var max=9;  
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[i] = randomNumber2;
}
//Generate the random province code.
var min=0;
var max=9;

To 至

//Generate 3 random letters & add to array.
var min = 0, max = 9, max2 = 20;
for(j=0; j<3; j++)
{ 
    var randomNumber = Math.floor(Math.random() * (+max2 - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[j] = randomNumber2;
}

3 - Use if and else if instead multiple if . 3-使用if和else if代替多个if 。 It will stop when the condition will be met instead to continue to verify every other conditions for now reason. 它会在满足条件时停止，而是出于现在的原因继续验证所有其他条件。 You might consider switch as well as there are a lot of if . 您可能会考虑使用switch以及很多if 。

From 从

if(GenProvCode == "CA")
{
    ++countCA
}
if(GenProvCode == "ZN")
{
    ++countZN
}
if(GenProvCode == "MP")
{
    ++countMP
}
if(GenProvCode == "EC")
{
    ++countEC
}
if(GenProvCode == "L")
{
    ++countL
}
if(GenProvCode == "GP")
{
    ++countGP
}
if(GenProvCode == "NC")
{
    ++countNC
}
if(GenProvCode == "FS")
{
    ++countFS
}
if(GenProvCode == "NW")
{
    ++countNW
}

To 至

if(GenProvCode == "CA")
{
    ++countCA
}
else if(GenProvCode == "ZN")
{
    ++countZN
}
else if(GenProvCode == "MP")
{
    ++countMP
}
else if(GenProvCode == "EC")
{
    ++countEC
}
else if(GenProvCode == "L")
{
    ++countL
}
else if(GenProvCode == "GP")
{
    ++countGP
}
else if(GenProvCode == "NC")
{
    ++countNC
}
else if(GenProvCode == "FS")
{
    ++countFS
}
else if(GenProvCode == "NW")
{
    ++countNW
}

4 - Concatenate 1000000 values first then inject it. 4-首先连接1000000值，然后注入它。 Otherwise the process will be to heavy. 否则，过程将会很繁重。

From 从

for(v=0; v<1000000; v++)
{
    document.OutputForm.GeneratedPlates.value += arrGenNumberPlates[v]+ "\n";
}

To 至

myValue = '';
for(v=0; v<1000000; v++)
{
    myValue += arrGenNumberPlates[v]+ "\n";
}
document.OutputForm.GeneratedPlates.value += myValue;

Hopefully, it would be optimized as you wish, otherwise please let me know, there is a ton of solution to keep increasing the speed. 希望它会按照您的意愿进行优化，否则请让我知道，有很多解决方案可以保持速度的提高。 Let me know if you have any comment, feedback or question please. 如果您有任何意见，反馈或问题，请告诉我。

JavaScript和HTML上的大量数据导致XAMPP中的“页面无响应”对话框

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-13 19:01:49

JavaScript和HTML上的大量数据导致XAMPP中的“页面无响应”对话框

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-13 19:01:49

解决方案1
0 已采纳 2018-10-13 19:01:49