在多个循环中使用计时器控件（即setTimeout）

我知道如何显示新闻时尚类型的时尚字符（每次延迟1次），但我似乎想出如何显示多个新闻项目。例如：在多个循环中使用计时器控件（即setTimeout）

我有一个字符串数组。
我想遍历每个项目在数组中，并...每个项目
和阵列中（即每个文本字符串），我会然后像到

遍历每个字符在该字符串和...

显示在70ms的间隔在屏幕上的字符（使用集时间到）。

一旦我到达该字符串中的最后一个字符，我想跳回到前一个循环（请参阅＃2），以1秒的间隔继续。（再次使用setTimeout）。

下面是我微弱的（即新手）解决这个问题的尝试。我可以得到每个字符串，到目前为止，只要做一个console.log就可以了。不能似乎弄清楚如何步骤4至6.

有人对此有所了解请。

在此先感谢！

<body> <p class="theText">This is test 1 of the text.</p> <p class="theText">This is test 2 of the text.</p> <p class="theText">This is test 3 of the text.</p> <div id="textScroller"></div> <script type="text/javascript"> var textScroller = function(scrollContainer){ var container = document.getElementById(scrollContainer); var nodeContainer = document.getElementsByClassName('theText'); // this function gets only the nodeValues from the nodeContainer array // and puts them in an array called textArray var getTextArray = function makeTextArray(theNodeArray){ var textArray = []; for(var i=0;i<nodeContainer.length;i++){ var container_text = nodeContainer[i].firstChild.nodeValue; textArray.push(container_text); } return textArray; }; var textArray = getTextArray(); /* Right now the "showText" function just logs the string of text to the console. But the function SHOULD [a] loop through each character in the CURRENT string and [b] display the current character [c] check if there are more characters and, if so... [d] display the next character in 70 milliseconds (i.e. setTimeout or setInterval) [e] if no more characters, go back to the function (loopArray) and get the next string */ function showText(theString){ console.log(theString); } // loop through and process each item in the array var l = 0; function loopArray(){ var thisString = textArray[l]; showText(thisString); if(l < textArray.length -1){ setTimeout(loopArray,1000); } l++; } setTimeout(loopArray,1000); } textScroller('textScroller'); </script> </body>

来源

2011-11-14 sleeper

你不需要多个循环，你只需要记住你是哪个字符最多在当前的数组项 - 如果你已经走了关底，然后移动到下一个项目。你可以试试下面的：

var loopForever = false, 
    itemIndex = 0, 
    charIndex = 0; 

function loopArray(){ 
    var currentItem = textArray[itemIndex]; 
    if (charIndex >= currentItem.length) { 
     // move on to next item 
     if (++itemIndex >= textArray.length) { 
     // if looping forever go back to start of the item array, 
     // otherwise return (in which case no new timeout will be set). 
     if (loopForever) 
      itemIndex = 0; 
     else 
      return; 
     } 
     charIndex = 0; 
    } 
    showText(currentItem.charAt(charIndex)); 
    // if at the end of the current item then delay 1000ms, otherwise 70ms 
    setTimeout(loopArray, ++charIndex === currentItem.length ? 1000 : 70); 
} 

setTimeout(loopArray,1000);

以上假设你的其他代码成功设置textArray，你要显示的字符串数组（例如，在你的榜样textArray是["This is test 1 of the text.","This is test 2 of the text.","This is test 3 of the text."]）。

来源

2011-11-14 03:23:21 nnnnnn

Bravo！干得好，谢谢你。我从这段代码中学到了很多东西。再次感谢！ – sleeper

在多个循环中使用计时器控件（即setTimeout）

回答

相关问题