Кто-то знает, если после отображения страницы HTML я могу получить доступ к определенному идентификатору (getElementById) и изменить его значение несколько раз?

Я хочу представить на стороне клиента некоторую строку и изменить ее несколько раз в зависимости от хода выполнения программы, но не могу, она пишет мне только недавно.

Например:

<script type="text/javascript">
  function foo(){
   for(var i = 0; i<10000; i++){
     document.getElementById('myTag').innerHTML = i;
   }
  }
</script>

В этом случае я не вижу, как работают номера. Я вижу только последний.

Если я поставлю предупреждение внутри цикла - значение будет изменено.

0
Refael 27 Янв 2013 в 18:11

2 ответа

Лучший ответ

Ты почти там. Единственное, что вы делаете неправильно, - это заменяете контент innerHTML вместо добавления к нему. Изменить это:

document.getElementById('myTag').innerHTML = i;

К этому:

document.getElementById('myTag').innerHTML += i;

Дополнительный / альтернативный ответ:

Подождите. Я просто перечитал ваш вопрос и понял, что есть другой способ его интерпретации. То, как вы спрашиваете, довольно расплывчато, поэтому я оставляю ответ выше как есть.

Причина, по которой вы не видите «бегущие числа» при обработке цикла for, заключается в том, что вы неправильно понимаете, как работает javascript в браузере.

Цикл обработки событий браузера работает примерно так:

1. Fetch content
2. Run javscript
3. Render content
then repeat forever

Вот как работает JavaScript. Таким образом, работает простой цикл, как вы делаете. Браузер выполняет сценарий до тех пор, пока не останется ничего другого для выполнения (шаг 2). Как только javascript завершит выполнение, он начнет процесс рендеринга (шаг 3). Очевидно, что к этому времени значение i является окончательным значением, и поэтому вы видите только конечное значение.

Браузер никогда не прерывает выполнение JavaScript для отображения / обновления страницы. Итак, как люди реализуют таймеры обратного отсчета и т.д.? Они делают это путем планирования части JavaScript для выполнения в следующей итерации цикла событий. Другими словами, пусть браузер перейдет к шагу 3, и в соответствующий момент, когда браузер снова перейдет к шагу 2, они запустят нужный сценарий.

Javascript в основном предоставляет два способа сделать это: setTimeout и setInterval.

Как работает setTimeout:

step 1. nothing to do
step 2. setTimeout schedules a piece of javascript to run at a later time
        Note that the javascript does not execute yet until setTimeout
        expires.
step 3. let the browser update the page
many, many loops of steps 1-3
step 2 (some time later).
        setTimeout expires and the piece of javascript executes
step 3. let the browser update the page

Итак, чтобы получить желаемый эффект, вам нужно сделать это так:

function foo(){
  var i = 0;
  var update = function(){
    document.getElementById('myTag').innerHTML = i;
    i++;
    if (i<10000) {
      setTimeout(update,100);
    }
  };
  update();
}
1
slebetman 27 Янв 2013 в 14:43

Как я понимаю ваш вопрос, вы хотите отсчет от 0 до 10000? а ты хочешь увидеть прогресс на экране? Вы могли бы сделать что-то подобное:

http://jsfiddle.net/camus/ayJFM/

var interval = 500;//milliseconds
var foo = (function () {
    var i = 0;
    var func = function () {

        if (i < 10000) {
            document.getElementById("myTag").innerHTML = i;
            i += 1;
            setTimeout(func, interval);
        }
    };
    return func;
})();

setTimeout(foo, interval);
2
mpm 27 Янв 2013 в 14:40