2

ユーザーがコンテンツを作成できるようにするCMSのコードがあります。対応するテキストエリアに入力されたテキストのプレビューを表示したいと思います（ここでのstakeoverflowのように）。ページが最初に読み込まれるとき、textareaはすでに入力されており、JavaScriptを使用してプレビューが更新されます。プレビューセクションのDOMが完全に更新されると、プレビューセクションでさらに後処理が実行されます。

質問jQuery/Javascript-目的の関数に進む前に操作されたDOMが更新されるのを待つ方法を見つけましたが、その答えはsetTimeout（）に依存しています。実行。

DOMの更新が完了していなかったため、約50％の確率で、後処理が途中で実行されました。この問題を解決するために、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);
}
4

2 に答える 2

2

.htmlは同期的であり、html の追加が完了するまで、それ以降のコードは実行を開始しません。

$.Callbacks()ここでは、キューイング システムを使用する必要はありません。

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

.html()それが機能しないことがわかった場合、それはまだ完了していないためではなく、問題は別の場所にあります。

于 2012-07-19T18:43:47.857 に答える
0

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-19T21:51:59.357 に答える