1
사용자가 콘텐츠를 작성할 수있는 CMS 코드가 있습니다. 해당 텍스트 영역에 입력 된 텍스트에 대한 미리보기를 표시하려고합니다 (여기서는 스테이크 오버 플로우와 비슷합니다). 페이지가 처음로드되면 텍스트 영역이 이미 채워지고 JavaScript가 미리보기를 업데이트하는 데 사용됩니다. 미리보기 섹션의 DOM이 완전히 업데이트되면 미리보기 섹션에서 추가 후 처리가 수행됩니다.추가 처리 전에 동적 DOM 업데이트 대기
관심있는 질문이 jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function인데, 실행하기 전에 잠깐 멈추려는 시간이 명확하지 않아서 문제가되는 setTimeout()에 의존합니다.
DOM의 업데이트가 완료되지 않았기 때문에 약 50 %의 시간 동안 내 후 처리가 조기에 중단되었습니다. 문제를 해결하기 위해 jQuery의 Callbacks 큐 메커니즘을 사용해 보았습니다.
후 처리를 시작하기 전에 동적으로 수정 된 DOM을 먼저로드하는 가장 좋은 방법은 무엇입니까?
예를 들면,
// using the provided source content, update the DOM indicated by
// the destination css selector string
function updatePreview(cssSelectorDst, content){
$(cssSelectorDst).html(content);
console.log("preview updated");
}
// if a <ul> appears at the beginning of the content, designate it
// as a keypoints section
function updateKeypoints(cssSelectorDst){
...
console.log("keypoints updated");
}
// update preview section using content from iframe (using tinyMCE)
function updateFromIframe(iframeSelector, cssSelectorSrc, cssSelectorDst){
// gather source data
var iframe = $(iframeSelector);
var content = $(iframe).contents().find(cssSelectorSrc).html();
// set up callbacks to ensure proper order and completion of actions
var callbacks = $.Callbacks();
callbacks.add(updatePreview);
callbacks.add(updateKeypoints);
callbacks.fire(cssSelectorDst, content);
}
케빈, html() 동기 부여에 대한 설명에 감사드립니다. 그게 알아두면 좋다! –