Javascript迭代显示带有暂停/停止jquery fadeIn和fadeOut的自定义列表

我有一个不断更新的数组，需要一次显示数组5中的项目。有时数组中的元素多于5个，有时则少于5个。如果数组中有5个以上的元素，那么我需要一次循环5个元素。例如，如果有10个元素，我想淡入1-5，然后淡出1-5，然后淡入5-10。我有这个工作，并且更新，但是，如果在数据更新之后只有4篇新闻文章可用，它仍然会在1-4中淡入淡出，一次又一次。我需要总是在第一篇文章中淡出，如果少于NumberShow，不要淡出，只需更新

我尝试了clearInterval，但它停止了更新。我试过了。停止（）。消失（）；但随后，淡入仍在发生。我试过了。停止（）。消失（）；with.stop（）.fadeIn（）；但数据永远不会消失。我是否应该传入数组以显示它，然后在其中循环

对于测试，这是使用日期模拟的。每隔8秒，它应使用更新的编号更新数据。如果有4篇文章，淡入并更新Date.now（）编号，但永不淡出。如果有10篇文章，淡入并更新每个周期

var numberToShow = 5;
var newsArray = [];
var startRow = 0;
var endRow = 0;

 function getData() {
  // Simulate the data changing using date.
  newsArray = [Date.now(), "News article 1", "News article 2", "News article 3", "News article 4", 
  "News article 5", "News article 6", "News article 7", "News article 8", "News article 9"];

  showNews(numberToShow);
 }

// Fade out the results for the next cycle
setInterval(function() {
 $("span.text").fadeOut({
  duration: 800
 });
 setTimeout(
   function() {
   getData();
   },
  (800)
 );
}, 8000);

// Update the data
function updateData() {
  getData();
  setTimeout(updateData, 6000);
}

// Display the results
function showNews() {

if (endRow >= newsArray.length) {
  startRow = 0;
}
endRow = startRow + numberToShow;

if (endRow >= newsArray.length) {
  endRow = newsArray.length;
}
  var results = "";
  for (var k = startRow; k < endRow; k++) {
     results += "<span class='text' style='display:none;'>" + newsArray[k] + "</span><br>";
  }
 startRow = startRow + numberToShow;

 document.getElementById('showResults').innerHTML = results;

 $("span.text").fadeIn({
  duration: 800
 });
}




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showResults"></div>

var numberToShow=5；
var newsArray=[]；
var startRow=0；
var endRow=0；
函数getData（）{
//使用日期模拟数据的更改。
newsArray=[Date.now（），“新闻文章1”，“新闻文章2”，“新闻文章3”，“新闻文章4”，
“第5条新闻”、“第6条新闻”、“第7条新闻”、“第8条新闻”、“第9条新闻”]；
showNews（numberToShow）；
}
//淡出下一个周期的结果
setInterval（函数（）{
$（“span.text”）.fadeOut({
持续时间：800
});
设置超时(
函数（）{
getData（）；
},
(800)
);
}, 8000);
//更新数据
函数updateData（）{
getData（）；
setTimeout（updateData，6000）；
}
//显示结果
函数showNews（）{
if（endRow>=newsArray.length）{
startRow=0；
}
endRow=startRow+numberToShow；
if（endRow>=newsArray.length）{
endRow=newsaray.length；
}
var结果=”；
对于（var k=startRow；k”；
}
startRow=startRow+数字显示；
document.getElementById（'showResults'）。innerHTML=results；
$（“span.text”）.fadeIn({
持续时间：800
});
}

好的-不确定您到底想做什么-但您可以轻松地将我的代码更改为您需要的任何内容 …让我们从清晰的算法开始：

获取数据

如果列表可见，则淡出…然后继续执行步骤3

渲染数组中项目的下一部分

如果列表不可见，则淡入…然后转至步骤5

等一下

检查是否已显示所有项目（如果未显示-使用步骤2显示下一部分，如果已显示-使用步骤1更新数据）

希望该准则能让您有机会根据自己的需要采用它：

var
numberToShow=5，
newsArray=[]，
startRow=0，
endRow=0，
$results=$（“#showResults”），
可见=假，
定时器；
函数FADEINIFREADED（回调）{
var is_visible=可见；
可见=真实；
如果（是否可见）{
回调（）；
}否则{
$results.fadeIn（800，回调）；
}
}
需要函数淡出（回调）{
var is_visible=可见；
可见=假；
如果（是否可见）{
$results.fadeOut（800，回调）；
}否则{
回调（）；
}
}
函数getData（）{
//模拟数据的变化
newsArray=[Date.now（）]；
//添加随机数目的项目
var j=Math.floor（Math.random（）*6）+2；
for（var i=1；i=newsaray.length）{
startRow=0；
}
endRow=startRow+numberToShow；
if（endRow>newsaray.length）{
endRow=newsaray.length；
}
var结果=”；
对于（var k=startRow；k”；
}
startRow=startRow+数字显示；
$results.html（results）；
FadeInNifRequired（函数（）{
nextCycle（）；
});
}
函数nextCycle（）{
//数据的每一部分都将显示6+0.8+0.8=7.6秒
计时器=设置超时（函数（）{
if（startRow>=newsArray.length）{
//如果已显示所有项目-获取新数据（更新）
getData（）；
}否则{
//如果要显示更多内容-淡出并渲染
需要衰减（函数（）{
renderList（）；
});
}
}, 6000);
}
getData（）
虽然前面的答案很好——但这一个可能更像您描述的情况。。。
对想法的简短描述：

显示列表或其部分
如果列表较长-重复（几秒钟后转到步骤1以显示列表的另一部分）
更新时-随时-使用新阵列重新启动
和工作示例（删除了不需要的代码并添加了按钮以帮助测试）：


var
numberToShow=5，
newsArray=[]，
startRow=0，
endRow=0，
$results=$（“#showResults”），
定时器；
函数getData（）{
//模拟数据的变化
newsArray=[Date.now（）]；
//添加随机数目的项目
var j=Math.floor（Math.random（）*7）+1；
for（var i=0；i=newsaray.length）{
startRow=0；
}
endRow=startRow+numberToShow；
if（endRow>newsaray.length）{
endRow=newsaray.length；
}
var结果=”；
对于（var k=startRow；k”；
}
startRow=startRow+数字显示；
$results.html（results）；
$results.fadeIn（800，function（）{
nextCycle（）；
});
}
函数nextCycle（）{
//只有在显示更多结果时才开始循环
如果（newsaray.length>numberToShow）{
计时器=设置超时（函数（）{
$results.fadeOut（800，函数（）{
renderList（）；
});
}, 4000);
}
}
//按要求更新
函数updateData（）{
清除超时（计时器）；
$results.stop（）；
getData（）；
}
//添加测试按钮
$results.before(
$（''）.text（'Update now'）。单击（函数（）{
更新数据（）；
})
)
getData（）