如何在循环和setInterval中执行fadein（）和fadeout（）ONLY ONCE？

Question

我正在制作一个更新的列表系统，每3秒检查一次JSON文件中的新数据。另外，我添加了效果fadeIn（）和fadeOut（），但是在每次循环和（setInterval（list，3000）;）时，fadeIn（）和fadeOut（）都会执行 。 我想执行它，一旦数据已经附加。对不起，我的英语不好。

注意：它在闪烁。在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

尝试添加变量，如果你的元素显示（如果元素已经表明只是为了检查）分配真实

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; + ""; 
    }); 
};