DOMにsetTimeoutとオブジェクトを追加する

Question

基本的な情報を含む行がいくつかあるページがあります。ユーザーは行をクリックすると詳細情報を表示でき、これにはajax呼び出しが必要です。私が戻ってくる情報の量に応じて、このajax呼び出しは2〜2回かかります。この時間に情報を読み込んでいることをユーザーに知らせるために、「読み込み中」というテキストを追加したいと思います。だから私は私のアヤックスコールを行う前に、テキスト 'Loading'でスパンを追加し、それを成功の上に削除します。しかし、AJAXには2〜2秒かかる場合がありますが、すべてが高速に実行され、「読み込み中」は表示されません。ブレークポイントで停止すると、読み込み中のテキストが表示されます。だから私は0msの待ち時間でsetTimeoutを使うことにしました。ブラウザが私の 'Loading'をレンダリングするのに十分な時間です。

はここにいくつかのサンプルコードです：ここで

$(document).ready(function() { 
    var item; 
    $('.my-row').click(function() { 
    item = $(this).val(); 
    $(this).children().append('<span id="loading">Loading..</span>'); 
    setTimeout(function() 
    { 
     getMyInformation(item, $(this).next().children()); 
    }, 0); 
    }); 
}); 

function getMyInformation(item, appendTo) { 
    $.ajax({ 
    url: myUrl, 
    async: false, 
    type: "POST", 
    data: { Id: item.id, Name: item.name }, 
    success: function (json) { 
     $('#loading').remove(); 
     appendItems(json.items, appendTo); 
    } 
    }); 
} 

function appendItems(items) { 
    $(items).each(function(i, item) { 
    appendTo.append('<div>item.info</div>'); 
    }); 
} 

は私の問題です：setTimeoutをなし 私の「ロード」は登場する機会はありませんが、私の情報はありませんので、ページが少しラグが見えることができますajax呼び出しの後に表示されます。 setTimeoutを使用すると、私の 'Loading'が表示され、私の 'items'のどれも追加されていないことを除いて、他のものはすべて期待どおりに動作します。ブレークポイントを設定して、私が渡すすべての項目に対してappendTo.append('<div>item.info</div>');を実行することができますが、ブラウザやDOMには表示されません。誰が何が起こっているか知っていますか？

Answer 1

あなたsetTimeoutの内部thisはもはや同じ文脈であるので - 手の前に変数を設定します。 `非同期を使用して

var elements = $(this).next().children(); 
setTimeout(function() 
{ 
    getMyInformation(item, elements); 
}, 0);