setTimeout в javascript не дает браузеру «передышку»

Измените код на

for (var x = 0; x < polygon.length; x++) {
    coordsObject.push(polygon[x]);
}
distributedDrawPolys();

function distributedDrawPolys()
{
    if (coordsObject.length > 0) {
        for (x = 0; x < 50; x++) {
            ...
        }
        setTimeout("distributedDrawPolys()", 5000); //render next 50 polys in 5 sec
    }
}

Если ваш цикл выполняется меньше секунды, все ваши вызовы setTimeout будут накапливаться, пытаясь запуститься примерно через пять секунд.

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

var theArray = [];
var limit = 50;

function showStuff() {
    for (...) {
        // push objects on theArray
    }

    renderArrayInBatches();
}

function renderArrayInBatches() {
    var counter;

    for (counter = limit; counter > 0; --counter) {
        // pop an object and render it
    }
    if (theArray.length > 0) {
        setTimeout(renderArrayInBatches, 10);
    }
}

Это создает массив за один раз, а затем запускает первый пакет (до limit) рендеринга. В конце первого пакета, если нужно выполнить дальнейший рендеринг, он планирует это сделать примерно через 10 мс. На самом деле это произойдет не раньше, чем через 10 мс, а вполне возможно и позже, если браузер все еще занят другими делами. (Относительно 10 мс: большинство браузеров не будут планировать что-то раньше, чем через 10 мс.) (Правка. Энди Э. совершенно правильно отмечает, что вы можете также свернуть логику, связанную с тем, что должно быть визуализируется в функцию рендеринга напрямую, а не сначала строит массив, а затем обрабатывает его. Не сильно меняет вышеизложенное, за исключением части массива, то, как вы выполняете цепочку, и «комната для дыхания» остается прежней.)

Не зная, что вы используете в excanvas, вы можете обнаружить, что вам нужно настроить время ожидания, но я склонен сомневаться в этом - это в основном операция «выход», которая позволяет браузеру делать некоторые вещи и возвращаться к вам.

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

function showStuff() {
    var theArray = [];
    var limit = 50;

    for (...) {
        // push objects on theArray
    }

    renderArrayInBatches();

    function renderArrayInBatches() {
        var counter;

        for (counter = limit; counter > 0; --counter) {
            // pop an object and render it
        }
        if (theArray.length > 0) {
            setTimeout(renderArrayInBatches, 10);
        }
    }
}

... но мне не хотелось усложнять основной ответ, вводя закрытие (хотя технически оба блока кода включают закрытие).

Нет, вы хотите что-то другое.

var batchsize = 50; 
function drawPolys(start) {
    for (var x = start; x < polygon.length; x++) {
        drawOnePolygon(polygon[x]);
        if (start + batchsize <= x) {
            // quit this invocation, and schedule the next
            setTimeout(function(){drawPolys(x+1);}, 400);
            return;  // important
        }
    }
}

тогда drawOnePolygon должен быть примерно таким:

function drawOnePolygon(p) {
    var coordinate = polygon.selectNodes("Coordinates/point");
    //...and so on, continuing from your code above.
}

начните с:

drawPolys(0); 

Если вы вызываете его каждые пять секунд, и каждый раз он выполняет 1 секунду работы, браузер будет заблокирован для взаимодействия в 20% случаев.

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

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

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

Вот простая реализация:

var coordObj = [...]; //50 or whatever elements
(function() {
    if (coordObj.length === 0) return; //Guardian
    var obj = coordObj.pop(); //or .shift(), based on the order desired.
    doStuffWithCoordObj(obj);
    setTimeout(arguments.callee,0); //call this anonymous function after a timeout
})();