jqueryを使用して最後から削除した後に追加するだけです

Question

非常にうまく動作するこのスクリプトを作成しました。これは、さまざまな数の要素を持つフィードを取得します。たとえば、5つの要素がある場合、最後から5を削除し、先頭に5を追加します。

残念ながら、要素をプリペンドする前に、要素が最後から完全に削除されるのを常に待っているわけではないという問題があるようです。これにより、フッターが上下にぶつかります。

誰かが自分の問題を解決する方法を知っているのだろうかと思います。私は遅れを加えようとしたが、それは部分的にしか役に立たなかった。

$(document).ready(function() { 
    window.setInterval(function(){ 

     $.ajax({ 
      type: 'POST', 
      url: location.protocol+'//'+location.hostname+'/index/feed', 
      success: function(data) { 

       var arr = data.split('@@@@@@@@@'); 

       $('#feed > .feed-item').slice(-1 * arr[0]).fadeOut(1000, function(){ 
        $(this).remove(); 
       }); 

       $("#feed").delay(2000).prepend(arr[1]); 

      } 
     }); 

    },2000); 
}); 

Answer 1

ローカルで動作させるためにコードを少し変更する必要がありましたが、この例では十分理解できると思います。

私は関数を作成します：関数をパラメータとして受け取るremoveFeed（コールバック）です。この関数は、remove文の直後に呼び出されます。

$ .ajaxの内部では、removeFeedのパラメータとして匿名関数を作成し、内部には前置機能を追加します。

希望すると助かります！

$(document).ready(function() { 
    var root = 'http://jsonplaceholder.typicode.com'; 
    var counter = 1; 

    function removeFeed(callback) { 
     $('#feed > .feed-item').fadeOut(1000, function() { 
      $(this).remove(); 
      callback(); 
     }); 
    } 
    window.setInterval(function() { 
     $.ajax({ 
      url: root + '/posts/' + (counter + 1), 
      method: 'GET', 
      success: function(data) { 

       removeFeed(function() { 
        $("#feed").prepend("<li class='feed-item'>" + data.title + "</li>"); 
       }) 

      } 
     }); 

    }, 2000); 
}); 

ps：完全に機能し、ページにコピー＆ペーストするだけで動作することを確認してください。

Answer 2

$('#feed > .feed-item').slice(-1 * arr[0]).fadeOut(1000, function(){ 
        $(this).remove(); 
       }); 

あなたがここにフェードアウトを使用しているので、あなたのフェードアウト内部関数がコールバックで呼び出されます。

これで先行すると最初に実行され、フィードアイテムは削除されます。 fadeOutを削除して、CSSフェードアウトエフェクトを使用することができます