Prevent animation of list items on div refresh every second

Question

I have a page which lists files from database every second.

DESIRED RESULTS

• I want all the li elements to fadeIn one by one on page load.

• Then fadeIn only the new li elements when new files are added to the database otherwise no animation to the already listed elements.

To get the fresh list of files I am using setInterval which in turn is causing the all the list items to fadeIn one by one every second. What should I do to achieve the desired results?

TO SUM UP WHAT I AM ASKING

I am asking for a way to show the elements as if they are fading in on by on on page load. Then if new items are added to the database then show them only one by one with the fading effect but at that time the fading effect should not be applied to the older items.

JS

$(document).ready(function() {
    var filelist = $('#file_list');
    $('#loading').show();

    var checkUpdate = function () {
        $.ajax({
            type: "GET",
            url: "generate_list.php",
            success: function (result) {
                $('#loading').hide();
                var arr = JSON.parse(result);
                console.log(arr);
                if (arr.length > 0) {
                    $('#empty_storage').hide();
                    filelist.html(arr);

                    $('li').each(function (i) {
                        $(this).delay(400*i).fadeIn(400);
                    });
                }
                else {
                    filelist.html('');
                    $('#empty_storage').show();
                }
            },
            error: function (response) {
                $('#loading').hide();
                $.alert({
                    theme: 'black',
                    title: false,
                    content: response
                });
            }
        });
        setTimeout(checkUpdate, 1700);
    };
    setTimeout(checkUpdate, 1700);
}); 

CSS

#file_list li
{
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 5px;
    display: none;
}

PHP SNIPPET

// Fetching only last 10 records LIFO
    $query = $dbh->prepare("SELECT * FROM uploads ORDER BY id DESC LIMIT 10");
    $query->execute();

    $items = array();
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        // Generate respective data to display
        $file_id            = $row['id'];
        $ico_path           = $base_icon_src.get_logo($row['file_ext']);
        $full_file_name     = $row['file_name'].'.'.$row['file_ext'];
        $file_ext           = $row['file_ext'];
        $file_code          = $row['file_code'];
        $download_file_path = './storage/'.$file_code.'.'.$file_ext;
        $file_size          = $row['file_size'];
        $file_upload_time   = $row['timestamps'];

        if(file_exists($download_file_path)) {
            // Generating markup
            $items[] = '<li>
                        <div class="f_icon"><img src="' . $ico_path . '"></div>
                        <div class="left_wing">
                            <div class="progressbar"></div>
                            <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
                            <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
                        </div>
                        <div class="right_wing">
                            <div class="f_delete">
                                <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'">
                                <i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
                                </a>
                            </div>
                        </div>
                        </li>';
        }
    }
    //content in $items must be in UTF-8
    echo json_encode($items);

Answer 1

In general - this is the workflow you should follow:

1. On page load (first time) get the list of the files you want to preview (it can be all of them, or only the last X). Make sure you have the id (from the database) of the last item (the largest id, if your items are orders). We will call this MAX_ID.
2. Once loaded - animate them one by one.
3. Using setTimeout, get the "next bulk" of files (you need to pass to the php script the ID that you saved from #1, so you can get only the files where id > max_id).
4. If you got new files - add them (you can animate them one by one).
5. Update the MAX_ID to be the new id you got from the "new bulk".
6. Inside the success function you should call again (using the setTimeout function to the code the gets the "next bulk" (#3).

Here is a simple example:

$(function() {
  $('li').hide();
  $($("li").get().reverse()).each(function(i) {
    $(this).delay(400*i).fadeIn(400);
  });
});

items = ['a', 'b', 'c', 'd']
$('#a1').click(function() {
  $(items).each(function(i, val) {
    li = $('<li>').text(val).hide();
    $('#u1').prepend(li);
    li.delay(400*i).fadeIn(400);
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="u1">
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
</ul>

<div id="a1">Click to add more items</div>