Question

我有一个api运行，它获取目录中的所有文件名，并在数组中返回一个数组。目前，我每秒运行它来检查是否添加了新文件，如果是这样的话......将其嵌入到我的div中。问题是我每次都要清空我的html，然后重新嵌入html。有一个更好的方法吗？这样我只会嵌入新的文件名而不是全部。

setInterval(function(){
    $.ajax({
        url : 'getFiles',
        success: function (data) {
            $("#pics").html("");
            console.log(data);
            $.each(data, function (k, o) {
                $.each(o, function (key, obj) {
                    $("#pics").append("<a href='#'>" + obj + "</a>");
                });
            });
        }
    });
}, 1000);

Answer 1

const images = [];

setInterval(function(){
    $.ajax({
        url : 'getFiles',
        success: function (data) {
            const fetchedImages = data.images;
            if(images.length !== fetchedImages.length){ //They do not have the same elements
              images = fetchedImages;
              $("#pics").html("");
              const domImages = fetchedImages.map(image => "<a href='#'>" + image + "</a>");
              $("#pics").append(domImages.join(''));
            }
        }
    });
}, 1000);

从我们的讨论中我能够创建这个解决方案。

由于您知道您只需要一个图像列表，因此您可以直接获取它。

然后，您可以检查本地保存的图像是否具有从服务器获得的相同数量的元素。

如果它们不匹配，那么它必须意味着列表已被更改（副作用可能是有人更改了文件的名称，那么长度将是相同的）

现在我们只清空#pics HTML，创建一个新数组，其中每个元素都包含在<a>标记中

最后join只接受一个数组并将其转换为字符串。 ''表示每个元素之间不应该有任何文本，因此字符串看起来像这样

"<a href='#'>image1.jpg</a><a href='#'>image2.jpg</a><a href='#'>image3.jpg</a>"

Answer 2

在您的情况下，我建议保持当前的实施：全部清除并按新接收的数据生成列表。原因是：

从性能视图中，清除所有内容并重新生成它将比每次比较更快并检查是否重复=＆gt;保留，删除旧项目或插入新项目
项目的顺序可以很容易地保存为接收数据。不要与旧项目列表混淆。

我建议的规则是：如果新列表完全相同，则直接返回而不做更改。如果列表已更改，请清除所有列表并直接重建列表。

附加新文件

2 个答案: