Показывать ход выполнения javascript

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

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

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

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

Ответ 1

Это связано с тем, что в 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();

Ответ 2

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

Показать gif и вызвать:

window.setTimeout(myFunction, 100)

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

Ответ 3

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

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

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

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

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);
    }
}

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

Ответ 4

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

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