Ajax-based message carousel

For ordinary message carousels, just remove the first div each time and append to the end.

Message data is now required to continuously fetch new ones from the database.

The initial idea is to put two large divs containing n message records respectively. When the first one moves out of the screen, it will be removed, and then ajax will request n message packets to be placed at the end of the new div.

Probably the code is ugly. After all, it is easy to make mistakes to get the height of the big div and the div at the top of the screen every time. There are always problems when displaying the first item.

Actually, it doesn't have to be so troublesome.

Taking the current specific problem as an example, because the current screen can display up to 3 pieces of information, change the condition of the ajax request to request when the count is less than 3.

Just use one big div and remove the top div every animation.

$(function(){
    SPEED = 3000;
    setInterval(scrollUp, SPEED);
});

function scrollUp() {
    var $this = $('.list-screen');
    count = $this.children('.content-item').length;
    curH = $('.content-item:first').outerHeight() + parseInt($('.content-item:first').css('margin-top'));

    if (count <= 3 ){
        var url = $this.data('url');
        $.get(url, function(result) {
            var html = '';
            $.each(result, function(i,k) {
                html+= '<div class="content-item"><div class="wxuser-info"><img class="user-avatar" src="'+ k.headimgurl +'"/>'
                + '<div class="user-name">' + k.en_name + '</div></div><div class="content-info-wrap">'
                + k.content + '</div></div>';
            });
            $this.append(html);
        });
    }
    $this.stop(true, false).animate({ top: '-=' + curH }, 800, function() {
        $this.children('div:first').remove();
        $this.css('top', 0);
    });
}