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 !
-
stackoverflow.com/questions/758688/…BenG– BenG2015年09月22日 18:57:19 +00:00Commented Sep 22, 2015 at 18:57
-
This might help. Add a setTimout inside your for loop. stackoverflow.com/questions/5226285/…Josh– Josh2015年09月22日 18:57:32 +00:00Commented Sep 22, 2015 at 18:57
-
use a Generator and a setTimeout Function will do your workCY5– CY52015年09月22日 18:57:34 +00:00Commented Sep 22, 2015 at 18:57
3 Answers 3
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>
answered Sep 22, 2015 at 18:59
GolezTrol
116k19 gold badges186 silver badges215 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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
Comments
You must use a recursive function to do what you want. E.g:
// 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.
answered Sep 22, 2015 at 19:02
Buzinas
11.8k2 gold badges38 silver badges59 bronze badges
5 Comments
GolezTrol
Congratulations, you've just invented
setInterval from scratch. :-) This is not actually a recursive function, by the way, since the 'recursive' call is done from the timer handler, and the calling function is already ended by that time.Buzinas
The problem with
setInterval is that it doesn't wait it to finish before starting again. So, if you're doing expensive stuff inside the callback, you won't get the desired result.GolezTrol
Theoretically that may be true, but if it takes more than 3 seconds to put a text in a div, you're already not getting desired results. :)
Buzinas
@GolezTrol well, it depends on what you want to achieve here ;) - btw, it's pretty easy to change the helper function to immediately call the callback if it's the first item.
Buzinas
@GolezTrol as simply as calling the
callback outside the setTimeout, as you can see in my edited answer.lang-js