javascript - 如何在循环和 setInterval 中仅执行一次 fadein() 和 fadeout() ？

Question

我正在制作一个更新的列表系统，每 3 秒检查一次 JSON 文件中的新数据。我还添加了 fadeIn() 和 fadeOut() 效果，但是fadeIn() 和 fadeOut() 每次循环时都会执行 (setInterval(list, 3000);)。 我想在数据已附加后执行它。抱歉我的英语不好。

注意:它一直闪烁。 3秒后

list();
setInterval(list, 3000);

function list() {
    $.getJSON('list.php',function(response){
        var timeout = 400;
        $("#list").fadeOut(timeout);
        $('#list').fadeIn(timeout);
        $('#list').empty();

        for(var i = 0; i < response.list_count; i++){
            var newElement = document.createElement('div');
            newElement.innerHTML = response.list[i].firstname;
            document.getElementById("list").appendChild(newElement);
        }
        document.getElementById("list_count").innerHTML = "" +  response.list_count; + ""; 
    });
};

Answer 1

尝试添加变量并在显示元素时分配 true(仅用于检查元素是否已显示)

var displayed = false;

list();
setInterval(list, 3000);

function list() {
    $.getJSON('list.php',function(response){
        var timeout = 400;
        if (displayed == false) {
            $("#list").fadeOut(timeout);
            $('#list').fadeIn(timeout);
            displayed = true;
        }
        $('#list').empty();

        for(var i = 0; i < response.list_count; i++){
            var newElement = document.createElement('div');
            newElement.innerHTML = response.list[i].firstname;
            document.getElementById("list").appendChild(newElement);
        }
        document.getElementById("list_count").innerHTML = "" +  response.list_count; + ""; 
    });
};