CODEWITHSUNDEEP
javascript
Allen Huang
Allen Huang

Reputation: 394

Change background images using setTimeout

I have 31 images and I want to display them one after another as the background of a div. I only want it to change when the user hovers over the div. My problem right now is that it just flips through all the images really fast. I am attempting to use setTimeout, but it isn't working. How can I make the delay work? The name of the div is About_Me_Block and the images are called frame1.gif,frame2.gif ...etc

Here is my code:

function changeImg(counter) {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}

$(document).ready(function() {
    var hoverAnimate = []
    "use strict";
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate[0] = true;
        var counter = 0;

        while (hoverAnimate[0]) {
            console.log(counter);
            setTimeout(changeImg(counter), 1000);
            counter++;
            if (counter === 32)
                hoverAnimate[0] = false;
        }
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate[0] = false;
        $(this).attr("style", "background-image: url(play.jpeg);");
    });
});

Upvotes: 0

Views: 954

Answers (4)

tkellehe
tkellehe

Reputation: 679

It seems you need to read up on how setTimeout works. It essentially places a reminder to run a function after a given amount of milliseconds have passed. So, when you do setTimeout(changImg(counter), 1000) you are calling changImg(counter) which returns undefined. Therein producing this setTimeout(undefined, 1000) which is why it flips really fast.

So, you can use bind to allow the function to be called later with that parameter built in. Also, make sure you remove the reminders once done with clearTimeout.

function changeImg(counter) {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}

$(document).ready(function() {
    var hoverAnimate = false, id;
    function loop(counter) {
        if(hoverAnimate || counter < 32) {
            changeImg(counter);
            id = setTimeout(loop.bind(this, counter++), 1000);
        }
    }
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate = true;

        id = setTimeout(loop.bind(this, 0), 1000);
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate = false;
        // Don't want a reminder for a random counter to wake up.
        clearTimeout(id);
        $(this).attr("style", "background-image: url(play.jpeg);");
    });
});

Upvotes: 1

Gracegotlost
Gracegotlost

Reputation: 29

the reason they happen all at once is because while statement doesn't have delay, so all setTimeout will be set up at the same time, thus, calling changeImg all at once.

To solve this problem, you can replace setTimeout with setInterval. Instead of using while, you can just call setInterval like

var counter = 0;
var myTimer = setInterval(changeImg, 1000);

and update counter inside changeImg every time it gets called. After looping, don't forget to 

clearInterval(myTimer)

Upvotes: 1

B&#225;lint
B&#225;lint

Reputation: 4039

setTimeout doesn't wait for the function to end, it works lile threading in other languages.

To achieve a what you want, you need to call setTimeout from the changeImg function.

var counter = 0;
$(document).ready(function() {
    var hoverAnimate = []
    "use strict";
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate[0] = true;
        counter = 0;
        changeImg();
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate[0] = false;
        $(this).attr("style", "background-image: url(play.jpeg);");
     });
 });

function changeImg() {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
    counter++;
    if (counter < 32 && hoverAnimate[0]) {
        setTimeout(changeImg, 1000);
    } else {
        hoverAnimate[0] = false;
    }
}

Upvotes: 1

George Poliovei
George Poliovei

Reputation: 1129

Two methods for timers - setTimeout and SetInterval (single / repeating)

// setInterval is also in milliseconds
var intervalHandle = setInterval(<yourFuncToChangeImage>,5000);

//this handle loop and make example loop stop
yourelement.yourEvent = function() {
clearInterval(intervalHandle);
};

Upvotes: 0

Related Questions