Как я могу взять Javascript для отображения цикла, сколько раз он был зациклен с живым счетчиком?

Question

Как мне взять Javascript для отображения цикла, сколько раз он был зациклен с текущим счетом?

for (var i = 0; i < 10; i ++) {
    [ DO FUNCTION HERE ]
    document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
}

Я хочу, чтобы он показывал "Cycles: #" и имел приращение # в реальном времени, поскольку оно проходит по каждой функции. Похоже на экран загрузки. Идеи?

Answer 1

Как насчет этого:

var out = document.getElementsByTagName("span")[3];
var speed = 1;
var i = 0;
function loop() {
    out.innerHTML = "Cycles " + i;
    // do something
    if (++i < 10) {
        setTimeout(loop, speed);
    }
}
loop();

Если это происходит слишком быстро, чтобы следить за временем, просто увеличьте speed. Если вы установите speed на 100, вы увидите увеличение счетчика примерно в 10 раз в секунду, в зависимости от того, сколько времени занимает выполнение кода.

Answer 2

Это будет обновлять ваш дисплей один раз в секунду.

DEMO: http://jsfiddle.net/Lb3Uc/

var span = document.getElementsByTagName("span")[3];
var i = 0;
(function looper() {
    if( i++ < 10 ) {
        span.innerHTML = "Cycles: " + i;
        setTimeout( looper, 1000);
    }
})();

Каждый раз, когда запускается функция looper, покаi < 10 он рекурсивно вызывается после задержки 1000ms.

Этот вид асинхронного кода требуется для того, чтобы перерисовать страницу.

Answer 3

Ваш цикл for на самом деле делает именно то, что вы хотели бы, но javascript выполняется так быстро, что вы попадаете в последний цикл быстрее, чем замечаете его изменение.Попробуйте записать свой var i в консоль, и вы поймете, что я имею в виду.Он печатается на каждом цикле, но кажется почти мгновенным, потому что выполнение сценария не занимает много времени.

РЕДАКТИРОВАТЬ:

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

var i = 0;
var interval = setInterval(
    function() { 
        /* add the rest of your method here */
        document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i;
        i++; 
        if(i > 10) { /* number of repetitions */
            clearInterval(interval);
        }
    },
1000); /* seconds delayed */

Answer 4

Чтобы координировать функцию AJAX и представление обновления прогресса, не искусственно замедляйте вызовы функций. Во-первых, это сократит время отклика, что не понравится пользователю. Для другого, прогы будут отключены на один.

Вместо этого пусть функция AJAX вызывает функцию, которая обновляет ход выполнения, когда вызов AJAX завершается успешно или условно, в зависимости от того, что подходит.

Наконец, вам может понадобиться изменить структуру документа, что потребует изменения способа получения элемента прогресса. Вместо этого присвойте элементу прогресса идентификатор и используйте getElementById.

var async_done = (function() {
    var doneCount = 0;
    return function () {
        ++doneCount;
        document.getElementById("Progress").innerHTML = "Cycles: " + doneCount;
    };
})();

for (var i = 0; i < 10; i ++) {
    async_function(async_done);
}

Answer 5

В вашей функции вы не добавляете, а заменяете содержимое своего диапазона.Вместо этого используйте оператор +=

http://jsfiddle.net/9wKQw/

for (var i = 0; i < 10; i ++) {
    document.getElementById("oput").innerHTML += "Cycles: " + i + "<br>";
}