随着 JavaScript 代码运行更新屏幕计数

Question

嘿，我刚刚开始学习 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 库。

Answer 1

你需要给 JS 一点时间来更新 DOM。现在它有其他优先事项（检查数字）。

替换

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

为

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

应该做的。

Answer 2

首先考虑优化代码。如果您可以使其速度更快，则无需处理长时间运行的作业。你需要这么频繁地更新 DOM 吗？那么每 n 次迭代又如何呢？

如果您必须有长时间运行的代码：

1. 将工作分成更小的部分。
2. 每件作品后更新屏幕。
3. 使用 window.setTimeout 在（非常）短暂的延迟后开始下一段。

这也可以防止浏览器因运行时间过长而终止脚本。

Answer 3

在函数内定义命名函数似乎有点奇怪。您可以尝试执行以下操作：

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

我不太确定是什么导致它挂起。

Answer 4

最简单的方法可能是在递归调用周围添加 setTimeout 进行检查，以便允许浏览器在中间时间内工作。下面我将超时设置为 100 毫秒，这意味着每秒更新 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();
    });
};