javascript - 動的投稿間の遅延

Question

クリックしたときに動的に読み込まれた各投稿を表示することを目的とした次の JS コードがあります。

    function showPost(id) {
    $.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        var output='';
        output += '<h3>' + data.post.title + '</h3>';
        output += data.post.content;
        $('#mypost').html(output);
    }); //get JSON Data for Stories
} //showPost

モバイルまたは Windows ブラウザーでページ ' http://howtodeployit.com/devotion/ 'をテストし、Daily Devotional Messagesをクリックして各投稿間を移動すると、以前にアクセスした投稿が新しい投稿の前に数秒間表示されることに気付きました。投稿が表示されます。

ページまたは DOM を更新して、以前にアクセスしたページをクリアする方法。

Answer 1

empty()アイテムをクリックしたとき、または戻るボタンをクリックしたときの myPost のコンテンツのみ。理由は、以前のコンテンツがまだmypostdiv に存在し、ajax 呼び出しが実行される前でもコンテンツ ページが表示され、完了までに 700 ミリ秒かかる場合があるため、その期間古いコンテンツが表示されるためです。

function showPost(id) {

 var $myPost = $('#mypost').empty(); //emtpy it

 $.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
    var output='';
    output += '<h3>' + data.post.title + '</h3>';
    output += data.post.content;
    $myPost.html(output);
}); //get JSON Data for Stories

Answer 2

関数は、$('#mypost').html("");表示内容をクリアする別の要求に進む前に行で開始します。

$('#mypost').html("Please wait...");また、次のリクエストからのコンテンツを表示する前に待機メッセージを追加できます。

function showPost(id) {

    $('#mypost').html(""); //add this line

    //$('#mypost').html("Please wait..."); //also you can add it to show waiting message.

    $.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
        var output='';
        output += '<h3>' + data.post.title + '</h3>';
        output += data.post.content;
        $('#mypost').html(output);
    }); //get JSON Data for Stories

}

Answer 3

$mypost を空にすることができます

 var $myPost = $('#mypost').empty();