긴 자바 스크립트 루프가 브라우저 충돌을 막는 방법?

Question

내 페이지에 일련의 DIV를 반복하고 편집하는 버튼이 있습니다 (주로 텍스트 추가, 심각하지 않음) DIV의 수가 사용자에 의해 변경되고 있습니다 (사용자가 자유롭게 추가하거나 제거 할 수 있음).), 내가 jQuery를 $의 .each 기능을 통해 div의 반복하고있어

:

var DomToEdit = $('.divs_to_edit'); 
$.each(DomToEdit, function() { $(this).append('text'); ... }); 

변수 DomToEdit가 된 div의 다소 무제한 포함하고 나는 $ .each 기능을 통해 그들에게 참조하십시오.

때때로 사용자가 secons 몇 기다리는 얻는다는 $ .each 루프를하는 동안, 더 나쁜 경우에 브라우저는

이 문제를 방지 할 수있는 방법이 있나요

충돌한다? 아마 50 DIVs 후에 루프 "sleep"을 가지고 있을까요?

감사

편집 : 동일한 ID를 사용하지 않은 죄송 - 내 설명에 결함이 있었다. 나는 같은 수업을 사용한다. :)

Answer 1

.each 처리기의 함수의 첫 번째 인수는 현재 요소의 인덱스입니다. 그 전에 검사를 추가하고 return false을 사용하여 루프를 중지 할 수 있습니다.

$.each(DomToEdit, function(i) { // or DomToEdit.each(function() { 
    if (i === 50) return false; 
    .. 

DomToEdit 정도로 $.each(DomToEdit, fn)DomToEdit.each(fn)과 등가이며, JQuery와 개체이다.

더 효과적인 방법은 .slice(0, 50)을 사용하여 요소를 잘라내는 것입니다. 내가 그 코드가 잠재적으로 충돌이 발생할 수 있다고 생각 할 때마다

는

DomToEdit.slice(0, 50).each(function(i) { 
    .. 

Answer 2

, 나는 루프 사이클의 특정 숫자 후 루프에서 나누기 자체 decementing breaker 변수를 만듭니다.

var breaker = 100; 
while(true) { 
    breaker--;if(breaker<0){console.log("Oh snap batman");break;} 


    console.log("CRASH"); 

} 

이 방법은 충돌과 관련된 대안 코드도 실행할 수 있습니다. 일반적으로, 난 그냥 어떻게 든 코드를 수정하려고;

Answer 3

) 당신 실행 스택에 각 요소의 처리를 대기 위해 0-setTimeout (0 단지) 지체없이 대기하게 수 :

$.each(DomToEdit, function() { 
    var elem = $(this); 

    setTimeout(function() { elem.append('text'); }, 0); 
}); 

Answer 4

을

타이머를 추가하여 50 div를 매 5 초마다 추가하고 모든 div를 반복 할 때까지 div 배열을 통해 작동합니다.

아래 코드는 5 초마다 50div에서 작동합니다.

var DomToEdit = $('#divs_to_edit'); 
var timer = setInterval(function() { //<-- Create a Timer 
    $.each(DomToEdit, function(index) { //<-- Iterate thru divs 
     if (index == 50) return;  //<-- Return on 50 for later 
     $(this).append('text'); 
    }); 
    DomToEdit = DomToEdit.slice(0, 50); //<-- Slice the processed div's 

    // Clear timer when all elements are processed. 
    if (DomToEdit.length == 0) { 
     clearInterval(timer); 
    } 
}, 5000);        // <-- Do the steps on every 5 secs 

Answer 5

그것은 실제로 통해 반복보다, 전체 컨테이너를 문자열로 전체 컨테이너 요소를 잡아 당기 자바 스크립트 .replace()을 실행하고 대체 덜 프로세서 집약적 될 것이라고 요소의 매우 많은 수의 가능 수십만 개의 요소?

Answer 6

당신은 작업을 대기 한 후 X의 일괄 작업마다 Y 밀리 초를 를 실행할 수 있습니다 :

var queue = []; 

$.each(DomToEdit, function() { 
    queue.push($.proxy(function() { 
     $(this).append('text'); 
    }, this)); 
}); 

window.setInterval(function(){ 
    var l = 100; 

    while(queue.length && l--) { //Keep executing tasks until there 
            //is no more or maximum amount of tasks 
            //executed for this batch is executed 
     queue.shift()(); 
    } 

}, 50); 

진짜 수정이 수행하고있는 것을 신중하게 검토하고 그 문제를 해결 물론이다. $('#divs_to_edit')은 항상 단일 요소를 최대로 반환하므로 .each은 여기에 적합하지 않습니다.