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

Question

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

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

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

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

Answer 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();

Answer 2

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

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

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

Я не проверял этот настоящий код, но я использовал эту технику раньше.

Answer 3

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

Покажите гифку и позвоните:

window.setTimeout(myFunction, 100)

Делай тяжелые вещи в "myFunction".

Answer 4

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

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