Nur vor dem Entfernen von Ende mit Hilfe von jquery

Question

Ich habe dieses Skript, das funktioniert sehr gut gemacht. Es erhält einen Feed mit einer variierenden Anzahl von Elementen. Dann, wenn zum Beispiel 5 Elemente vorhanden sind, entfernt es 5 vom Ende und fügt 5 zum Anfang voran.

Leider scheint es ein Problem zu geben, bei dem es nicht immer darauf wartet, dass die Elemente vollständig vom Ende entfernt werden, bevor sie vorangestellt werden. Dies führt dazu, dass die Fußzeile auf und ab bewegt wird.

Ich frage mich, ob jemand weiß, wie ich mein Problem beheben kann. Ich habe versucht, eine Verzögerung hinzuzufügen, aber das half nur teilweise.

$(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

Ich musste den Code ein wenig ändern, damit es lokal funktioniert, aber ich denke, dieses Beispiel kann Ihnen einen guten Griff geben.

Ich erstelle eine Funktion: removeFeed (Callback), die eine Funktion als Parameter empfängt, diese Funktion wird direkt nach der Anweisung zum Entfernen aufgerufen.

Innerhalb de Erfolg in $ .ajax Sie erstellen eine anonyme Funktion als Parameter für removeFeed und innerhalb Sie die Funktion vorgeben.

Hoffe es hilft!

$(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: es ist voll funktionsfähig, um zu sehen, wie funktioniert es nur kopieren und auf einer Seite einfügen.

Answer 2

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

Da Sie fadeout hier verwenden, würde Funktion in Ihrem fadeout in einem Rückruf aufgerufen werden.

So würden Sie vor, würde zuerst ausgeführt werden und Feed Element würde entfernt werden. Entfernen Sie FadeOut und Sie können Css Fadeout-Effekte verwenden