Полный цикл асинхронизации Bluebird [дубликат]

У вас есть выбор с или без webWorkers:

Без WebWorkers

Для кода, который должен взаимодействовать с DOM или с большим количеством других состояний в вашем приложении, вы можете 't использовать webWorker, поэтому обычное решение состоит в том, чтобы разбить вашу работу на куски, каждый кусок работы на таймере. Разрыв между кусками с таймером позволяет движку браузера обрабатывать другие события, которые происходят, и не только позволит пользователю вводить обработку, но также позволяет рисовать экран.

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

function processLargeArray(array) {
    // set this to whatever number of items you can process at once
    var chunk = 100;
    var index = 0;
    function doChunk() {
        var cnt = chunk;
        while (cnt-- && index < array.length) {
            // process array[index] here
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArray(veryLargeArray);

Вот рабочий пример концепции - не эта же функция, но другая который использует ту же идею setTimeout() для тестирования вероятностного сценария с большим количеством итераций: http://jsfiddle.net/jfriend00/9hCVq/

Вы можете сделать вышеприведенную версию более общей версии, которая вызывает функцию обратного вызова, например .forEach(), например:

// last two args are optional
function processLargeArrayAsync(array, fn, chunk, context) {
    context = context || window;
    chunk = chunk || 100;
    var index = 0;
    function doChunk() {
        var cnt = chunk;
        while (cnt-- && index < array.length) {
            // callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback, 100);

Вместо того, чтобы угадывать, сколько штук сразу, это также возможно, чтобы прошедшее время было ориентиром для каждого фрагмента и позволяло ему обрабатывать столько, сколько может за определенный промежуток времени. Это несколько автоматически гарантирует отзывчивость браузера, независимо от того, насколько интенсивна итерация процессора. Таким образом, вместо того, чтобы передавать размер фрагмента, вы можете передать значение в миллисекундах (или просто использовать интеллектуальное значение по умолчанию):

// last two args are optional
function processLargeArrayAsync(array, fn, maxTimePerChunk, context) {
    context = context || window;
    maxTimePerChunk = maxTimePerChunk || 200;
    var index = 0;

    function now() {
        return new Date().getTime();
    }

    function doChunk() {
        var startTime = now();
        while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
            // callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback);

С WebWorkers

Если код в вашем петле не требуется доступ к DOM, тогда можно поместить весь временной код в webWorker. WebWorker будет запускаться независимо от главного браузера Javascript, а затем, когда он будет выполнен, он сможет передавать любые результаты с помощью postMessage.

WebWorker требует отделить весь код, который будет запущен в webWorker, в отдельный скрипт файл, но он может завершиться без каких-либо проблем с блокировкой обработки других событий в браузере и без беспокойства по поводу приглашения «не отвечающего сценария», который может возникнуть при выполнении долгого процесса в основном потоке.