Показать выполнения JavaScript прогресс

У меня есть некоторые функции javascript, которые занимают от 1 до 3 секунд. (некоторые циклы или код шаблона mooML.)

в течение этого времени браузер просто заморожен. Я попытался показать анимацию "загрузки" (gif-изображение) перед началом операции и скрыть ее после слов. но это просто не работает. Браузер зависает, прежде чем он сможет отобразить изображение, и скрывает его сразу после завершения функции.

есть ли что-нибудь, что я могу сделать, чтобы сказать браузеру обновить экран прежде чем перейти к выполнению javascript., Что-то вроде приложения.DoEvents или фоновые рабочие потоки.

Итак, любые комментарии / предложения о том, как показать прогресс выполнения javascript. Мой основной целевой браузер IE6, но также должен работать на всех последних браузерах

12
javascript progress

4 ответов

это связано с тем, что все в IE6 выполняется в одном потоке-даже анимация gif.

единственный способ убедиться, что gif отображается перед запуском, - это отсоединить выполнение.

function longRunningProcess(){
    ....

    hideGif();
}

displayGif();
window.setTimeout(longRunningProcess, 0);

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

var process = {
    steps: [
        function(){
            // step 1
            // display gif
        },
        function(){
            // step 2
        },
        function(){
            // step 3
        },
        function(){
            // step 4
            // hide gif
        }
    ],
    index: 0,
    nextStep: function(){
        this.steps[this.index++]();
        if (this.index != this.steps.length) {
            var me = this;
            window.setTimeout(function(){
                me.nextStep();
            }, 0);
        }
    }
};

process.nextStep();
19

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

показать gif и позвонить:

window.setTimeout(myFunction, 100)

сделайте тяжелый материал в "myFunction".

1

вы должны использовать немного более сложную технику, чтобы показать прогресс длительной работы функции.

предположим, у вас есть такая функция, которая работает достаточно долго:

function longLoop() {
    for (var i = 0; i < 100; i++) {
        // Here the actual "long" code
    }
}

чтобы сохранить интерфейс отзывчивым и показать прогресс (также, чтобы избежать "скрипт занимает слишком много времени..."сообщения в некоторых браузерах), вы должны разделить выполнение на несколько частей.

function longLoop() {
    // We get the loopStart variable from the _function_ instance. 
    // arguments.callee - a reference to function longLoop in this scope
    var loopStart = arguments.callee.start || 0;

    // Then we're not doing the whole loop, but only 10% of it
    // note that we're not starting from 0, but from the point where we finished last
    for (var i = loopStart; i < loopStart + 10; i++) {
        // Here the actual "long" code
    }

    // Next time we'll start from the next index
    var next = arguments.callee.start = loopStart + 10;
    if (next < 100) {

        updateProgress(next); // Draw progress bar, whatever.
        setTimeout(arguments.callee, 10);
    }
}

Я не проверял этот код, но я использовал этот метод до.

1

установить wait курсор перед запуском функции и ее последующее удаление. В jQuery вы можете сделать это так:

var body = $('body');
body.css("cursor", "wait");
lengthyProcess();
body.css("cursor", "");
0