Question

我有一个页面，每秒都会列出数据库中的文件。

期望的结果

我希望所有 li元素在页面加载时逐个淡出。
然后，当新文件添加到数据库时，仅淡入新li元素，否则不会对已列出的元素进行动画处理。

要获取我正在使用setInterval的新文件列表，这反过来导致所有列表项每秒逐个淡入淡出。我该怎么做才能达到预期的效果？

总结我的要求

我想要一种方法来显示元素，好像它们在页面加载时淡入。然后，如果将新项目添加到数据库中，则仅逐个显示淡入淡出效果，但此时不应将淡化效果应用于旧项目。

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

一般而言 - 这是您应遵循的工作流程：

在页面加载（第一次）时，获取要预览的文件列表（可以是所有文件，也可以只是最后一个X）。确保您拥有最后项目的ID（来自数据库）（如果您的商品是订单，则为最大ID）。我们将此称为MAX_ID。
加载后 - 逐个制作动画。
使用setTimeout，获取“下一批”文件（您需要将从＃1保存的ID传递给php脚本，这样您才能获得id> gt_max_id的文件）。
如果您有新文件 - 添加它们（您可以逐个设置它们的动画）。
将MAX_ID更新为您从“新批量”获得的新ID。
在success函数中，您应该再次调用（使用setTimeout函数代码获取“下一个批量”（＃3）。

这是一个简单的例子：

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

防止div每秒刷新列表项的动画

1 个答案: