更新在JavaScript代码运行的屏幕上的计数

嘿，我刚开始学习JavaScript，我正在做一个小脚本产生两个数字，第一个数字保持不变，但第二个数字得到重新生成，如果它不匹配第一个数字。更新在JavaScript代码运行的屏幕上的计数

这里是我的脚本：

function randomNumberMatcher(){ 
    $(document).ready(function(){ 
     var number1 = Math.floor(1000000*Math.random()); 
     var number2 = Math.floor(1000000*Math.random()); 
     var count = 0; 
     $("#box").append("Number to match:[" + number1 + "]<br /><span id='count'></span>"); 
     function newNumber(){ 
      number2 = Math.floor(1000000*Math.random()) 
      count ++; 
      $("#count").html("Number of tries:[" + count + "]<br /><br />"); 
      $("#box").append(number2 + "<br />"); 
      check(); 
     } 
     function check(){ 
      if(number2 != number1){ 
       newNumber(); 
      } 
     } 
     check(); 
    }); 
};

目前，当我运行该脚本，它是所有挂起，直到它完成，然后将数据打印到屏幕上，然而这是不是我的本意它要做的是，我想要的是将数据实时打印到屏幕上，以便我可以逐个看到屏幕上显示的不同数字。

我该如何做到这一点？

注意：我也使用jQuery库。

来源

2009-11-12 Stanni

您需要给JS a 位更新DOM。现在它有其他优先事项（检查数字）。

通过

if(number2 != number1){ 
    setTimeout(newNumber, 1); 
}

更换

if(number2 != number1){ 
    newNumber(); 
}

应该做的。

来源

2009-11-12 15:16:35 BalusC

这绝对完美，谢谢。 – Stanni 2009-11-12 15:23:31

不客气。 – BalusC 2009-11-12 15:24:58

OP忘了给你+1。 – Amarghosh 2009-11-12 15:28:10

首先考虑优化代码。如果可以加快速度，就不需要处理长时间运行的工作。你需要经常更新DOM吗？那么反过来每个n迭代呢？

如果你必须长时间运行代码：

将作业分成小块。
更新每件后的屏幕。
使用window.setTimeout在非常短的延迟后开始下一个作品。

这也可以防止浏览器由于运行时间过长而导致脚本被杀。

来源

2009-11-12 15:14:12

最简单的方法可能是在递归调用周围添加一个setTimeout来检查，以便允许浏览器在间隔时间内工作。下面我将超时设置为100ms，这意味着它将每秒更新10次。

function randomNumberMatcher(){ 
    $(document).ready(function(){ 
     var number1 = Math.floor(1000000*Math.random()); 
     var number2 = Math.floor(1000000*Math.random()); 
     var count = 0; 
     $("#box").append("Number to match:[" + number1 + "]<br /><span id='count'></span>"); 
     function newNumber(){ 
       number2 = Math.floor(1000000*Math.random()) 
       count ++; 
       $("#count").html("Number of tries:[" + count + "]<br /><br />"); 
       $("#box").append(number2 + "<br />"); 
       window.setTimeout(check,100); 
     } 
     function check(){ 
       if(number2 != number1){ 
         newNumber(); 
       } 
     } 
     check(); 
    }); 
};

来源

2009-11-12 15:15:27 rjmunro

似乎有点奇怪的是定义函数中的命名函数。你可以尝试，而不是像这样做：

var newNumber = function() {...} 
var check = function() {...}

我不太清楚是什么导致它挂起。

来源

2009-11-12 15:16:02 Myles

更新在JavaScript代码运行的屏幕上的计数

回答

相关问题