Yogesh Ghimire Yogesh Ghimire - 6 months ago 26
jQuery Question

Displaying image from array in Javascript in setTimeInterval method

I am having little bit difficulty time pausing the image, so it gets rendered. I have images stored in even index in an

array
(for example: 2, 4, 6). And using
for loop
, I want to change the image every 2 seconds. On the load of the HTML page, I call
onLoad = executeOnLoad() in HTML
. The image changes from default to the image that is in sixth index, but after that it is not changing. It stays on that same index although, the console says the
i
is changing.

function executeOnLoad(){
for(var i = 0; i < 7; i++){
if (i%2 == 0) {
console.log("started.."+i);
displayImage(i);
}

}
}

function displayImage(i){
console.log("displaying...." + i);
document.getElementById("initial_image").src = contentArray[i];
}

window.setInterval("executeOnLoad()", 1000);


This is the console output that repeats every 1 sec but image is not changing:

started..0
displaying....0
started..2
displaying....2
started..4
displaying....4
started..6
displaying....6 < ---- The image here is displayed but, not changing to other..


I appreciate your help. Thanks.

Answer

There is no pause in your code. That loop just runs through all of your images and therefore only the last one will "stick".

You can fix this by using settimeout:

console.clear();
document.body.innerHTML = '';
//START
var contentArray = [
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg',
    'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg',
    'https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg',
    'https://i.vimeocdn.com/video/552738927_1280x720.jpg'
]

var initImg = document.createElement("img");
initImg.id = "initial_image";
initImg.src = '';
document.body.appendChild(initImg);

function executeOnLoad() {
    for (var i = 0; i < 7; i++) {
        if (i % 2 == 0) {
            (function (a) {
                setTimeout(function () {
                    console.log("started.." + a);
                    displayImage(a);
                }, 1000 * (a + 1))
            })(i);
        }

    }
}

function displayImage(i) {
    console.log("displaying...." + i, contentArray[i]);
    document.getElementById("initial_image").src = contentArray[i];
}

executeOnLoad();