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 มิลลิวินาทีนับจากนี้) (แก้ไข Andy E ชี้ให้เห็นอย่างถูกต้องว่าคุณอาจพับตรรกะที่เกี่ยวข้องกับสิ่งที่จำเป็นต้องเป็นได้เช่นกัน แสดงผลเป็นฟังก์ชันการเรนเดอร์โดยตรงแทนที่จะสร้างอาร์เรย์ก่อนแล้วจึงประมวลผล ไม่ได้เปลี่ยนแปลงสิ่งที่กล่าวมาข้างต้นมากนักยกเว้นส่วนของอาร์เรย์ วิธีที่คุณทำการผูกมัดและ "ห้องหายใจ" ยังคงเหมือนเดิม)

คุณอาจพบว่าคุณจำเป็นต้องปรับเวลาหมดเวลาโดยไม่ทราบถึงสิ่ง excanvas ที่คุณใช้อยู่ แต่ฉันมักจะสงสัย -- โดยพื้นฐานแล้วมันเป็นการดำเนินการ "ให้ผลตอบแทน" ซึ่งช่วยให้เบราว์เซอร์ทำบางสิ่งและกลับมาหาคุณ

โปรดทราบว่าตัวอย่างโค้ดหลอกด้านบนใช้สิ่งที่ดูเหมือนจะเป็นโกลบอล ฉันไม่แนะนำให้ใช้ globals จริงๆ คุณอาจต้องการทำสิ่งนี้แทน:

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

...แต่ฉันไม่ชอบทำให้คำตอบหลักซับซ้อนด้วยการแนะนำการปิด (แม้ว่าในทางเทคนิคแล้ว codeblock ทั้งสองจะเกี่ยวข้องกับการปิด)

ไม่ คุณต้องการสิ่งที่แตกต่างออกไป

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