javascript - jquery淡入数组中的项目

Question

早上好。我在使用 Javascript 处理函数内的数据时遇到了问题。我是 Javascript 的新手，所以希望有一个简单的解释。

我的目标是按顺序显示数组中的每一项，每一项都淡入淡出。通过单击屏幕上的按钮调用函数后将启动此过程。

我试图通过按索引号遍历数组的成员来做到这一点。该函数不是按索引号处理和显示每个元素，而是遍历整个序列，但仅显示数组的最后一个元素。但是，它确实通过淡入和淡出最后一个值来执行所需次数的显示。

这是我写的代码；

var tarList = [ "Sentence one.",
            "Sentence two.",
            "Sentence three.", 
            "Sentence four.",
            "Sentence five.",
            "Sentence six."];

var $button = $('button');

var index = 0;

function displayText(indexNo) {
    $("h3").text(
        tarList[indexNo]).fadeIn(700).delay(1200).fadeOut(700);
}

$button.on('click', function(){
    for (var i=0; i < tarList.length; i++) {
        console.log(i);
        displayText(i);
    }
});

在 CodePen 上全力以赴http://codepen.io/cg893/pen/rLgLAP

我不明白为什么 Javascript 遍历整个范围并且只用最后一个值调用显示函数，尽管对显示函数的调用在迭代范围内。我也不明白为什么淡入/淡出命令执行了正确的次数但只使用数组中的最后一项。

我见过其他示例(example、example2)，其中对 html 中的列表元素执行淡入/淡出序列。我的目标是将数组用作单独的数据源，以便可以将值作为一个组进行处理。如果唯一的方法是在 html 中包含值，有人可以就如何最好地执行此操作提供建议吗？谢谢。

var tarList = [ "Sentence one.",
                "Sentence two.",
                "Sentence three.", 
                "Sentence four.",
                "Sentence five.",
                "Sentence six."];

var $button = $('button');

var index = 0;

function displayText(indexNo) {
    $("h3").text(
        tarList[indexNo]).fadeIn(700).delay(1200).fadeOut(700);
}

$button.on('click', function(){
    for (var i=0; i < tarList.length; i++) {
        console.log(i);
        displayText(i);
    }
});

#button_1 {
  left: 50%;
  top: 50%;
  position: absolute;
}


h3 {
  position: relative;
  margin-top: 1em;
  text-align: center;
  font-size: 2em;
  font-family: Arial;
  transition: color 1s ease-in-out;
}

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>





<h3 id="target_text">Start</h3>
<button id="button_1" type="submit" >Go!</button>

Answer 1

您的 for 循环没有等待您的 displayText() 函数。它运行很快，整个 displayText() 仍在处理中。

解决方案->

$button.on('click', function(){

  function Loop () {           
    setTimeout(function () {    
    displayText(i);           
  i++;                    
  if (i < 10) {            
     Loop();           
    }                       
   }, 2600)
  }
  Loop();

  });