在進一步處理之前等待動態DOM更新

我有一些允許用戶創作內容的CMS代碼。我想要顯示在相應的textarea中鍵入的文本的預覽（很像這裏的放置流程）。當第一次加載頁面時，textarea已經被填充並且JavaScript被用於更新預覽。預覽部分的DOM完全更新後，會在預覽部分執行進一步的後處理。在進一步處理之前等待動態DOM更新

我找到了感興趣的問題jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function，但它的答案依賴於setTimeout（），我發現它在過去有些問題，因爲不清楚在執行前要暫停多少秒鐘。

約有50％的時間，我的後期處理過早解僱，因爲DOM沒有完成更新。爲了解決這個問題，我嘗試過使用jQuery的回調隊列機制。

什麼是確保動態修改的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); 
}

來源

2012-07-19 David Vezzani

.html是同步的，代碼後，纔會開始執行，直到它完成追加HTML。

這裏沒有必要使用$.Callbacks()或任何排隊系統。

// Update Preview 
updatePreview(); 
updateKeypoints();

如果發現不工作，這不是因爲.html()尚未完成，問題是其他地方。

來源

2012-07-19 18:43:47

凱文，感謝澄清html（）是同步。這很好知道！ – 2012-07-19 21:52:50

正如Kevin B所建議的，問題在於調用此方法時，調用html（）並不總是有數據。最終，它確實進行了輪詢（是的，使用setTimeout（））;感謝善良的塊（而不是匿名函數），否則這將不會如此優雅。

function updateFromIframe(iframeSelector, cssSelectorSrc, cssSelectorDst){ 
    var iframe = $(iframeSelector); 
    var content = $(iframe).contents().find(cssSelectorSrc).html(); 

    if(content == null){ 
    console.log("content not yet available; trying again..."); 
    return setTimeout(function(){updateFromIframe(iframeSelector, cssSelectorSrc, cssSelectorDst)}, 50); 
    } 

    updatePreview(cssSelectorDst, content); 
    updateKeypoints(cssSelectorDst, content); 
}

檢查瀏覽器控制檯，我們看到它處理這種情況就好了。不要在意第一個地方不需要投票！

content not yet available; trying again... 
content not yet available; trying again... 
content not yet available; trying again... 
content not yet available; trying again... 
content not yet available; trying again... 

content: <ul><li>condimentum rhon ... nunc, <br><br></p> 
preview updated 

keypoints updated

來源

2012-07-19 21:51:59

在進一步處理之前等待動態DOM更新

回答

相關問題