What is wrong while, Iterating through the array? [duplicate] - javascript

This question already has answers here:
Python while loop conversion to Javascript [duplicate]
(2 answers)
Closed 6 years ago.
In the for loop i'm iterating through the array of strings and meanwhile changing the src of image but, setTimeout method is not holding myfun for 3000 ms because of this the for loop just iterate in a blink of any eye to the last string of array. Where I'm going wrong?
<script>
function myfunction(){
var arr = ["mind.jpg","images.jpg","external.jpg"];
var image = document.getElementById("IMAGE");
for(var i =0;i<arr.length;i++)
{
setTimeout(myfun,3000);
image.src = arr[i];
}
}
function myfun(){
}
</script>

If you want to make something like slideshow, you need to do it like this:
function myfunction() {
var arr = ["mind.jpg","images.jpg","external.jpg"];
var image = document.getElementById("IMAGE");
var i = 0;
function next() {
image.src = arr[i];
if(++i === arr.length) {
i = 0
}
}
setInterval(next, 3000)
}

for (var i = 0; i < arr.length; i++) {
myfun(i);
}
function myfun(i) {
setTimeout(function() {
image.src = arr[i];
}, 3000 * i);
}
for (var i = 0; i < 5; i++) {
myfun(i);
}
function myfun(i) {
setTimeout(function() {
document.write(i + '<br>');
}, 1000 * i);
}

Related

Cannot set innerHTML inside setTimeout

Trying to set the innerHTML of a HTML class which are four boxes, each to be set 3 seconds one after another. I can set the innerHTML without setTimeout when the innerHTML is set to a loading icon. When innerHTML is put inside setTimeout the following is returned: 'Uncaught TypeError: Cannot set property 'innerHTML' of undefined'.
Tried to debug my code sending messages to the console and searching stackoverflow but no luck.
var x = document.getElementsByClassName("numberBox");
for (var i = 0; i < 4; i++) {
x[i].innerHTML= '';
x[i].innerHTML= "<div class='loader'></div>"
}
// function to generate array of 4 random numbers
var randomNums = generateRandomNumbers();
for (var i = 0; i < 4; i++) {
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i);
}
Would like to know why my innerHTML cannot be set within setTimeout here and possible solutions to my problem.
I believe this is a question of the current scope. The setTimeout function creates its own scope that has no reference to the old variable. You'll likely need to redefine what x is inside the timeout or pass the array explicitly to the timeout.
See here for how-to: How can I pass a parameter to a setTimeout() callback?
I would also recommend reading up on closers as well: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
When you use var inside the for-loop the setTimeout is actually triggered for the last value of i as in var the binding happens only once.
This is because the setTimeout is triggered when the entire loop is completed, then your i will be 4. Keep in mind that there is a closure because of the callback function you pass in the setTimeout call. That closure will now refer to the final value of i which is 4.
So in this case when the complete loop has executed the value of i is 4 but there are indexes upto 3 in x. That is why when you try to access x[4] you get undefined and you see TypeError to fix this just use let for fresh re-binding with the new value of i in every iteration:
for (let i = 0; i < 4; i++) {
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i);
}
Also if you cannot use let due to browser incompatibility you can do the trick with a IIFE:
for (var i = 0; i < 4; i++) {
(function(i){
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i);
})(i);
}
This works because var has function scope, so here in every iteration a new scope would be created along with the function with a new binding to the new value of i.
Because of missing i parameter - timeout probably used last (4) which was out of array.
But you can set&use function parameters by adding next timeout parameters.
var x = document.getElementsByClassName("numberBox");
for (var i = 0; i < 4; i++) {
x[i].innerHTML= '';
x[i].innerHTML= "<div class='loader'></div>"
}
// function to generate array of 4 random numbers
var randomNums = generateRandomNumbers();
for (var i = 0; i < 4; i++) {
setTimeout(function (i) {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i, i);
}
function generateRandomNumbers() {
var retVal = [];
for (var i = 0; i < 4; i++) {
retVal.push(Math.random());
}
return retVal;
}
<div class="numberBox"></div>
<div class="numberBox"></div>
<div class="numberBox"></div>
<div class="numberBox"></div>
// function to generate array of 4 random numbers
var x = document.getElementsByClassName("numberBox");
var randomNums = generateRandomNumbers();
for (var i = 0; i < 4; i++) {
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i, x);
}
This problem is related to a very basic and popular concept of Javascript called closure. It can be solved in at least two ways:
Using let
var x = document.getElementsByClassName("numberBox");
for (let j = 0; j < 4; j++) {
x[j].innerHTML= '';
x[j].innerHTML= "<div class='loader'></div>"
}
// function to generate array of 4 random numbers
var randomNums = generateRandomNumbers();
for (let i = 0; i < 4; i++) {
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i);
}
Using IIFE
var x = document.getElementsByClassName("numberBox");
for (var i = 0; i < 4; i++) {
x[i].innerHTML= '';
x[i].innerHTML= "<div class='loader'></div>"
}
// function to generate array of 4 random numbers
var randomNums = generateRandomNumbers();
for (var i = 0; i < 4; i++) {
setTimeout((function (j) {
x[j].innerHTML= '';
x[j].innerHTML = randomNums[j];
})(i), 3000 * i);
}
You are trying to access x in a inner method, that is x is not defined in the scope of setTimeout that is why you receive that execption
I would suggest you use a setInterval function as the solution
Your code:
var randomNums = generateRandomNumbers();
for (var i = 0; i < 4; i++) {
setTimeout(function () {
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
}, 3000 * i);
}
A work around
var randomNums = generateRandomNumbers();
let i = 0;
let interval = setInterval(function() {
if( i != 2){
x[i].innerHTML= '';
x[i].innerHTML = randomNums[i];
i += 1;
} else {
clearInterval(interval) ;
}
}, 3000);
This issue appears to be caused by several factors.
Defining the generateRandomNumbers() function outside the setTimeout() scope.
Using the var definition inside your for loop.
function generateRandomNumbers() {
return Math.floor(Math.random() * 999999) + 10000;
}
var x = document.getElementsByClassName("numberBox");
for (var i = 0; i < x.length; i++) {
x[i].innerHTML= '';
x[i].innerHTML= "<div class='loader'></div>"
}
for (let i = 0; i < x.length; i++) {
setTimeout(function() {
x[i].innerHTML= '';
x[i].innerHTML = generateRandomNumbers();
}, 3000 * i);
}
This is a different implementation, but here's a Fiddle

setTimeout doesn't work JavaScript "style undefined" [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I want to fade in 4 div boxes, one by one.
In css they have the opacity = 0.
Here my JavaScript code:
function fadeIn() {
var box = new Array(
document.getElementById('skill1'),
document.getElementById('skill2'),
document.getElementById('skill3'),
document.getElementById('skill4')
);
var pagePosition = window.pageYOffset;
if (pagePosition >= 1000) {
for (var i = 0; i < box.length; i++) {
setTimeout(function(i) {
box[i].style.opacity = "1";
}, i * 500);
}
}
}
Well, the function has to start if you scroll the page to the position 1000px and called in the body-tag:
Without the setTimeout it works, but with this function the console says:
Uncaught TypeError: Cannot read property 'style' of undefined
I'm a beginner and want to understand JS, so please don't provide an answer using jQuery.
By the time your your timeout runs, the loop has finished processing, so i will always be the last iteration. You need a closure:
for(var i = 0; i < box.length; i++) {
(function(index) {
setTimeout(function() {
box[index].style.opacity = "1";
}, index*500);
})(i)
}
The problem is the scope. When anonymous function executes inside timeout i variable has the last value of the i in the iteration. There are two solutions:
1) Use an IIFE:
for (var i = 0; i < box.length; i++) {
(function (i) {
setTimeout(function (i) {
box[i].style.opacity = "1";
}, i * 500);
})(i);
}
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);//prints out 0 1 2 3 4
}, i * 500)
})(i);
}
2) Using let:
for (let i = 0; i < box.length; i++) {
setTimeout(function (i) {
box[i].style.opacity = "1";
}, i * 500);
}
"use strict";
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 500)
}
The let statement declares a block scope local variable, optionally
initializing it to a value.
Keep in mind let is feature fo ecmaScript 6.

JavaScript Closure in Loop [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I wanted to solve this question posted as a public question on testdome. Each as[i] should be a function that does alert(i).
The code to be bug-fixed is this:
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (i = as.length; i-- >= 0;) {
as[i].onclick = function() {
alert(i);
return false;
}
}
}
The solution I attempted is this:
function registerHandlers() {
var as = document.getElementsByTagName('a');
//made the loop variables more explicit
for (i = as.length-1; i >=0; i--) {
var x = i;
as[x].onclick = function() {
alert(x);
return false;
}
}
}
I though that variable i is persistent, so I kept its copy in variable x, and use variable x instead of i. But it does not solve the problem completely. Please let me know what is my misunderstanding.
Your i and x values are declared in exactly the same scope, so by the time the function is executed x will be its final value. You could create a closure like this:
function registerHandlers() {
var links = document.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i += 1) {
links[i].onclick = generateHandler(i);
}
function generateHandler (index) {
return function () {
alert(index);
return false;
}
}
}

javascript run function with delay inside the iteration

I want to find elements with javascript with delay. In first step I made this and it works.
function mytag() {
var elements = document.getElementsByTagName('div');
for (var i=0, im=elements.length; im>i; i++) {
if (elements[i].className ==='hi'){
alert('found');
}}
}
In the second step, I made some changes to code to put delay between iteration. I followed this link but cannot make it to work . Whats wrong?
function mytag() {
var elements = document.getElementsByTagName('div');
for (var i=0, im=elements.length; im>i; i++) {
(function(i){
setTimeout(function(){
if (elements[i].className ==='hi'){
alert('found!');
}
}, 3000 * i);
}(i));
}
}
Here's an example of how you could add asynchronousity into your lookup function:
function findElements() {
var elements = document.getElementsByTagName('div');
var index = 0;
var findNext = function() {
var element = elements[index];
index++;
if (element.className === 'hi'){
// Item found
console.log('found:'+element);
}
if (index < elements.length) {
setTimeout(findNext, 100);
}
};
findNext();
}
findElements();
http://jsbin.com/zeseguribo/1/edit?html,js,console
function sleep(milliseconds) {
var start = new Date().getTime();
while (1) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
} // sleep end
then call sleep(3000) in your loop.
Edit: This is a blocking way of delay. For async, non-blocking delay, you may use a recursive function.

How to cycle through without it being random?

I have a method like so:
function randomHighlights() {
loops++;
var newRandom = Math.floor(Math.random() * 12 + 1);
while (lastRandom == newRandom) {
newRandom = Math.floor(Math.random() * 12 + 1);
}
lastRandom = newRandom;
var li = $('#u-' + newRandom);
$('#home-grid-list li').random().addClass(function() {
var liClass = $(this).attr('class').split(/\s+/);;
$('#home-grid-list li').removeClass('color-off');
$('#home-grid-list li.' + liClass[0]).addClass('color-off');
clearTimeout(timer);
});
$('#home-grid-list li').removeClass('text-on');
timer = setTimeout(randomHighlights, 2500);
if (loops == 20) {
clearTimeout(timer);
longHighlight();
}
}
It highlights 4 images at a time. The problem is I don't want it to be random anymore because there are only 3 different choices for it to be random and obviously it ends up picking the same block more than once creating a lag effect. Now I want to cycle through the #home-grid-list and highlight them cyclically. Any advice on how to do that?
longHighlight() just highlights a random block of 4 pictures for longer than returns to this method.
EDIT: Is this more what you had in mind?
JS:
var items = $('#home-grid-list').children('li');
var len = items.length;
var arr = [0,1,2,3];
window.setInterval(cycle,1000);
function cycle() {
items.removeClass('highlight');
for (var i=0; i<4; i++) {
var temp = arr.shift();
arr.push(((temp+4<len)?temp+4:temp+4-len));
}
for (var i=0; i<4; i++) {
items.filter('#u-'+arr[i]).addClass('highlight');
}
}
Here's an updated fiddle.
Something like this?
JS:
var items = $('#home-grid-list').children('li');
var len = items.length;
var arr = [0,1,2,3];
window.setInterval(cycle,1000);
function cycle() {
items.removeClass('highlight');
var temp = arr.shift();
arr.push(((temp+4<len)?temp+4:temp+4-len));
console.log(arr);
for (var i=0; i<4; i++) {
items.eq(arr[i]).addClass('highlight');
}
}
Here's a fiddle.

Categories