How to add a pause during every iteration of a “for loop” using Javascript?
Question
Scenario: I have an array of words and their corresponding meanings which I have to display in intervals in different DIVs. Following is the code I wrote:
<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>
Please help me in achieving it by providing valuable guidance.
Many Thanks !
3 answers
solution1
2 ACCPTED 2015-09-22 18:59:07
You can't make a delay, but you can set a timer that updates the texts periodically.
I've kept the variables as you named them, but I wrapped the lot in an Immediately-invoked function expression to keep the global scope clean. This is not necessary by the way.
<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>
solution2
0 2015-09-22 18:59:09
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
solution3
0 2015-09-22 19:02:13
You must use a recursive function to do what you want. Eg:
// 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>
The timer function above can be called for any array, passing a callback function for what you want, and the time you want to delay between iterations.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.