Обновление счетчика экрана при запуске кода JavaScript - PullRequest
Новая
       16

Обновление счетчика экрана при запуске кода JavaScript

0 голосов
/ 12 ноября 2009

Эй, я только начал изучать 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.

Ответы [ 4 ]

1 голос
/ 12 ноября 2009

Вам нужно дать JS бит время для обновления DOM. Теперь у него есть другие приоритеты (проверка номеров).

Замена 

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

от 

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

должен сделать.

0 голосов
/ 12 ноября 2009

Возможно, проще всего добавить 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();
    });
};
0 голосов
/ 12 ноября 2009

Кажется немного странным определять именованную функцию внутри функции. Вместо этого вы можете попробовать сделать что-то вроде: 

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

Я не совсем уверен, что вызывает его зависание.

0 голосов
/ 12 ноября 2009

Сначала рассмотрите возможность оптимизации кода. Нет необходимости справляться с длительной работой, если вы можете сделать это быстрее. Вам нужно обновлять DOM так часто? А как насчет каждых n итераций?

Если у вас должен быть долгосрочный код:

  1. Разбейте работу на более мелкие кусочки.
  2. Обновлять экран после каждого фрагмента.
  3. Используйте window.setTimeout , чтобы начать следующий фрагмент после (очень) короткой задержки.

Это также препятствует тому, чтобы браузер убил скрипт из-за его слишком долгого выполнения.

...