런어웨이 JavaScript 루프 문제 해결

JavaScript는 클라이언트 측에서 웹페이지를 편리하게 제어할 수 있다는 것 외에도 많은 문제를 가져옵니다. 그 중 스크립트 제어권을 잃는 것은

가장 골치 아픈 문제 중 하나입니다. 스크립트의 제어권을 잃는 것은 루프에서 너무 많은 작업이 수행됩니다

루프가 제어를 벗어나는 데에는 두 가지 이유가 있습니다. 하나는 루프에 너무 많은 작업이 있기 때문입니다. 루프가 너무 많습니다.

이 문제를 해결하는 방법은 다음 두 가지 질문으로 각 루프 평가를 사용하는 것입니다.

이 루프를 동기식으로 실행해야 합니까?
루프에 있는 데이터는 순서대로 실행되어야 하나요?
두 질문에 대한 대답이 '아니요'인 경우 루프에서 작업을 분해하도록 선택할 수 있습니다. 핵심은 코드의 특정 컨텍스트를 기반으로 위의 두 가지 질문에 대한 답을 결정하는 것입니다. 일반적인 루프는 다음과 같습니다.

for(var i=0; i < items.length; i++){
process(items[i]);
}

얼핏 보면 이 루프에는 큰 문제가 없습니다. 오랫동안 실행될지는 전적으로 루프 수에 달려 있습니다. 루프 직후 실행 시 루프 결과에 의존하는 다른 코드가 없는 경우 첫 번째 질문에 대한 대답은 "아니요"입니다. 또한 루프는 한 번에 하나의 값만 처리하고 이전 루프의 결과에 의존하지 않으므로 두 번째 질문에 대한 대답도 '아니오'입니다. 이는 브라우저가 잠기고 스크립트가 제어할 수 없다는 메시지를 표시하지 않는 방식으로 루프가 분해될 수 있음을 의미합니다.

"Professional JavaScript, Second Edition"이라는 책에서는 실행 시간이 매우 긴 환상에 대해 다음 방법을 사용하여 처리하도록 권장합니다.

함수 청크(배열, 프로세스, 컨텍스트) {
setTimeout(function(){
var item = array.shift();
process.call(context, item);

if (array.length > 0 ){
setTimeout(arguments.callee, 100);
}
}, 100);
}

chunk() 함수의 목적은 배열을 작은 조각으로 나누는 것입니다. 처리(따라서 이름)를 위해 세 개의 매개변수를 전달할 수 있습니다. 처리할 배열 개체, 처리 함수 및 process() 함수에서 해당 this 개체를 설정하는 데 사용되는 선택적 컨텍스트 변수입니다. 첫 번째 타이머는 작업 간 지연을 처리하는 데 사용됩니다(여기서는 100밀리초로 설정되어 있으며 실제 필요에 따라 수정할 수 있음). 이 함수가 실행될 때마다 배열의 첫 번째 개체를 꺼내서 process() 함수에 전달하여 작업합니다. 이때 process()에 아직 처리되지 않은 개체가 있으면 다른 타이머가 시작됩니다. 자꾸. 위에서 언급한 루프의 경우 이 함수를 다음과 같은 방식으로 사용할 수 있습니다.

chunk(items, process);

여기서 배열은 대기열 형식을 취한다는 점에 유의해야 합니다. , 루프 중에 매번 수정이 발생합니다. 배열의 원래 상태를 수정하려는 경우 다음 두 가지 방법이 있습니다. 하나는 concat() 함수를 사용하여 현재 배열을 전달하기 전에 복사본을 만드는 것입니다.

chunk(items.concat( ), process );

또 다른 옵션은 Chunk() 함수를 직접 수정하고 함수 내에서 직접 수정하는 것입니다.

function Chunk(array, process, context){
var items = array .concat(); //배열 복제
setTimeout(function(){
var item = items.shift();
process.call(context, item);

if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}

이 방법에 유의하세요. 다음 타이머가 적용되기 전에 배열의 내용이 변경될 수 있으므로 인덱스를 저장하는 것보다 훨씬 안전합니다.

여기서 언급된 Chunk() 함수는 루프 성능을 최적화하기 위한 시작점일 뿐입니다. 필요에 따라 더 많은 기능을 갖도록 계속 개선할 수 있습니다. 예를 들어 배열의 모든 개체가 처리된 후 함수 콜백을 추가할 수 있습니다. 이러한 방식으로 함수를 수정하는지 여부에 관계없이 이는 배열 처리 성능을 최적화하고 스크립트가 제어할 수 없다는 경고를 방지하는 데 도움이 될 수 있는 JavaScript 코드 개발 모델일 뿐입니다.

위 내용은 out-of-control JavaScript 루프 문제에 대한 해결 방법입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!