如何在每一次“暂停”的迭代过程中添加一个暂停;对于循环“;使用Javascript

How to add a pause during every iteration of a "for loop" using Javascript?

本文关键字：暂停 一个 于循环 循环 Javascript 添加 使用 一次 迭代 过程中      更新时间：2023-09-26

场景：我有一组单词及其相应的含义，我必须以不同的DIV间隔显示。以下是我写的代码：

<body>
<div id="worsd">
</div>
<div id="meaning"> 
</div>
<script>
var wordss = [["word1","meaning1"],["word2","meaning2"],["word3","meaning3"]];
for(var i =0;i<wordss.length;i++)
{
var hellooo = wordss[i][0];
var hellooo1 = wordss[i][1];
document.getElementById('worsd').innerHTML = hellooo;
document.getElementById('meaning').innerHTML = hellooo1;
}
</script>
</body>

请通过提供宝贵的指导来帮助我实现这一目标。

非常感谢！

您不能延迟，但您可以设置一个定期更新文本的计时器。

我在命名变量时保留了这些变量，但我将这些变量封装在一个立即调用的函数表达式中，以保持全局范围的干净。顺便说一下，这没有必要。

<body>
<div id="worsd">
</div>
<div id="meaning"> 
</div>
<script>
(function() // Wrap in immediately invoked function.
{
  var wordss = [["word1","meaning1"],["word2","meaning2"],["word3","meaning3"]];
  var i = 0;
  // Function that just shows the next word every time it is called.
  function nextWord() {
    var hellooo = wordss[i][0];
    var hellooo1 = wordss[i][1];
    document.getElementById('worsd').innerHTML = hellooo;
    document.getElementById('meaning').innerHTML = hellooo1;
    if (++i >= wordss.length) 
      i = 0; // Wrap when the last element is passed.
  };
  
  // Set a timer to call the function every 2 seconds.
  setInterval(nextWord, 2000);
  // Show the first word right away.
  nextWord();
})();
</script>
</body>

var arrOfWords = [] // words here
function showWords(index) {
    // do your words display stuff here
}
var counter = 0;
var timeOut = setInterval(function(){
    counter++;
    if(counter < arrOfWords.length)
        showWords(counter)
    else
        clearInterval(timeOut)
}, 2000) // ms of loop
showWords(counter) // be sure to handle the first one

您必须使用递归函数来执行您想要的操作。例如：

// timer function that loops through an array in a given interval
function timer(list, callback, time /*, onFinish, index*/ ) {
  var onFinish = arguments.length > 3 ? arguments[3] : void 0,
    index = arguments.length > 4 ? arguments[4] : 0;
  if (index < list.length) {
    callback.call(this, index, list[index]);
    list.__timed = setTimeout(function() {
      timer(list, callback, time, onFinish, ++index);
    }, time);
  } else if (onFinish) {
    onFinish.call(this);
  }
  return {
    cancel: function() {
      if (list.__timed !== void 0) {
        clearTimeout(list.__timed);
        delete list.__timed;
      }
    }
  };
}
document.addEventListener('DOMContentLoaded', function() {
  var wordss = [
      ["word1", "meaning1"],
      ["word2", "meaning2"],
      ["word3", "meaning3"]
    ];
  
  timer(wordss, function(index, item) {
    var hellooo = item[0];
    var hellooo1 = item[1];
    
    document.getElementById('worsd').innerHTML = hellooo;
    document.getElementById('meaning').innerHTML = hellooo1;
  }, 3000);
});
<body>
  <div id="worsd">
  </div>
  <div id="meaning">
  </div>
</body>

上面的timer函数可以为任何数组调用，为您想要的内容以及您想要在迭代之间延迟的时间传递回调函数。

相关文章：