仅在使用 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

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

由于您在此处使用淡出，因此将在回调中调用淡出内的函数。

因此，您预先添加的内容将首先执行，并且提要项目将被删除。移除 fadeOut，你可以使用 css 淡出效果

Answer 2

我不得不稍微更改代码以使其在本地运行，但我认为这个示例可以让您很好地掌握。

我创建了一个函数：removeFeed(callback)，它接收一个函数作为参数，这个函数在 remove 语句之后被调用。

在 $.ajax 中的 de success 中，您创建了一个匿名函数作为 removeFeed 的参数，并在其中放置了前置函数。

希望对您有所帮助ps！

$(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：功能齐全，只需复制并粘贴到页面中即可查看它的工作情况。

仅在使用 jquery 从末尾删除后添加

Only prepend after removed from end using jquery

javascript

jquery

prepend