时间戳

首页 > 解决方案 > Javascript迭代显示带有暂停/停止jquery fadeIn和fadeOut的自定义列表

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

问题描述

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

我试过 clearInterval，但它停止更新。我试过 .stop().fadeOut(); 但随后淡入不断发生。我试过 .stop().fadeOut(); 使用 .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>

标签： javascriptjqueryloopsfadeinfadeout

解决方案

虽然以前的答案很好 - 这个可能更像你描述中的情况......这个想法的简短描述：

  1. 显示列表或其中的一部分。
  2. 如果列表更长 - 重复（几秒钟后转到步骤 1 以显示列表的另一部分）
  3. 当更新到来时 - 随时 - 从新数组重新开始

和工作示例（删除不需要的代码并添加按钮以帮助测试）：

var
  numberToShow = 5,
  newsArray = [],
  startRow = 0,
  endRow = 0,
  $results = $("#showResults"),
  timer;

function getData() {
  // Simulate the data changing
  newsArray = [Date.now()];
  // add random number of items
  var j = Math.floor(Math.random()*7)+1;
  for(var i=0; i<j; i++){
    newsArray.push('News article '+i);
  }
  // add one more item named "last"
  newsArray.push('Last News article');

  startCycle();
}

function startCycle() {
  startRow = 0;
  endRow = 0;
  $results.fadeOut(800, function(){
    renderList();
  });
}

function renderList() {
  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'>" + newsArray[k] + "</span><br>";
  }
  startRow = startRow + numberToShow;
  $results.html(results);

  $results.fadeIn(800, function(){
    nextCycle();
  });
}

function nextCycle() {
  // start cycling only if there is more results to be shown
  if(newsArray.length > numberToShow){
    timer = setTimeout(function(){
      $results.fadeOut(800, function(){
        renderList();
      });
    }, 4000);
  }
}

// update on request
function updateData() {
  clearTimeout(timer);
  $results.stop();
  getData();
}
// add button for tests
$results.before(
  $('<button/>').text('Update now').click(function(){
    updateData();
  })
)

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

推荐阅读