아마도 다른 closure-loop 문제

Question

내 웹 페이지로 노트 세트를 가져오고 있습니다. 이것은 루프에서 로컬로 JSON 파일을 읽고 기본 div에 읽기 데이터를 추가하는 것입니다. 지금까지는 아무런 문제가 없습니다. 그런 다음 각 노트 옆에 ckeditor 인스턴스를 생성하여 클라이언트가 관심 노트에 쉽게 주석을 추가 할 수있게합니다. 주석은 처음에 ckeditor 인스턴스에로드 된 다른 HTML 파일에있는 여러 개의 인덱싱 된 빈 div로 생성됩니다. 그러나 이러한 모든 일은 매우 큰 for 루프에서 발생합니다 (상황에 따라 세그먼트 화 된 방식으로로드되는 노트가 약 6000 개). 그래서 지금은 고전적인 클로저 루프 문제에 종사하고 있습니다. 몇 가지 이전의 질문을 읽고 foo this와 다른 웹 사이트를 테스트하고 closure-loop 문제를 없애기 위해 여러 가지를 테스트했지만 지금까지는 성공하지 못했습니다. .

var q; 
$.when(
    $.ajax(... loads the json file that contains the notes and set q=$.parseJSON(data) on success) 
).then(function() { 
    for(var i in q) { 
     if(i is in a specific range){ 
       ... several lines of code for properly importing the notes ... 
       ... and generating a place for the comments to appear as: 
       ... +'<div id="CKEditor'+i+'" contenteditable="true" placeholder="Put your comment here!"></div>' 
       ... which is appended to the main div of the webpage 
       ... Now the main problematic part begins: 

       $('#temporary').empty(); // a hidden div defined somewhere in the page  
       var func = (function() { 
        var ilocal=i, tmp; 
        return function() { 
         tmp=document.getElementById('temporary').innerHTML; 
         alert(tmp); 
         CKEDITOR.instances['CKEditor'+ilocal].setData(tmp); 
        } 
       })(); 
       $.when(
        $('#temporary').load("NewComments.htm #verse-"+i) 
       ).then(func); 
     }; 
    }; 
    CKEDITOR.disableAutoInline = true; 
    CKEDITOR.inlineAll(); 
}) 

아마 문제가 다음) 루프에 대한하지만 중첩 $ .when (위해이지 않는다(), 어떤 제안이 문제를 해결하려면

내 자바 스크립트의 관련 세그먼트는 구조를 가지고 ?

Answer 1

문제는 페이지에 $('#temporary') div가 하나만 있으며, 반복 될 때마다 다시 사용 및 덮어 쓰게됩니다. 특히, 콜백

document.getElementById('temporary').innerHTML; 
… 
CKEDITOR.instances['CKEditor'+ilocal] 

에 ilocal (및 tmp) 변수는 참으로 인생과 특정 반복 로컬하지만 document.getElementById는 글로벌이다. 매번 같은 요소를 반환합니다.

빠른 수정 대신 func가 호출 될 때의 모든 요청에 ​​대한 새로운 요소를 생성하고 (당신이 ilocal에 i을 할당 같은) 반복하는 동안 tmp에 할당하는 것입니다.
그러나 더 나은 방법은 $('#temporary').load("NewComments.htm #verse-"+i)을 여러 번 사용하지 않고 Ajax 당 NewComments.htm을 한 번만로드하고 필요한만큼 결과를 처리하는 것입니다.