在 javascript 代码运行时更新屏幕计数答案

【问题标题】：Updating on screen count as javascript code runs在 javascript 代码运行时更新屏幕计数
【发布时间】：2010-12-15 22:11:36
【问题描述】：

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

【问题讨论】：

标签： javascript jquery random real-time

【解决方案1】：

最简单的方法可能是在您的递归调用周围添加一个 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();
    });
};

【讨论】：

【解决方案2】：

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

替换

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

通过

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

应该这样做。

【讨论】：

我会，但我现在的水平不行。

【解决方案3】：

在函数中定义命名函数似乎有点奇怪。您可以尝试改为：

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

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

【讨论】：

【解决方案4】：

首先考虑优化代码。如果您可以使其更快，则无需处理长期运行的工作。你需要经常更新 DOM 吗？那么每个n 迭代呢？

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

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

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

【讨论】：