CODEWITHSUNDEEP
javascriptjquery
Stefan Djurcic
Stefan Djurcic

Reputation: 87

Cant get jquery code to execute every second..?

Im trying to get this function to execute every second but its not working. I can only manage to get what i want by triggering the hover event or similar (ie. click). But i want it to act on its own! so that every second or wutever it will run the change() function. I have tried setInterval and setTimeout but to no avail. Only if i refreshed the page will it execute the function. Maybe im doing it wrong but i wouldnt know... Any help is appreciated, thanks!

here is what i want but its using hover..thus user needs to trigger the event, which is not what i want.. needs to happen automatically every x seconds!

http://jsfiddle.net/nycionx/LzbCP/

$(document).ready(function()
{
    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];

    function change() 
    {
        var ranColor = Math.floor(color.length * Math.random());
        $(this).css('background-color', color[ranColor]);
    }

    $('#_1x1_1_1').hover(change);
    $('#_1x1_1_2').hover(change);
    $('#_1x1_1_3').hover(change);
    $('#_1x1_1_4').hover(change);

    $('#_1x1_2_1').hover(change);
    $('#_1x1_2_2').hover(change);
    $('#_1x1_2_3').hover(change);
    $('#_1x1_2_4').hover(change);

    $('#_1x1_3_1').hover(change);
    $('#_1x1_3_2').hover(change);
    $('#_1x1_3_3').hover(change);
    $('#_1x1_3_4').hover(change);

    $('#_1x1_4_1').hover(change);
    $('#_1x1_4_2').hover(change);
    $('#_1x1_4_3').hover(change);
    $('#_1x1_4_4').hover(change);

});

here is my attempt using setInterval but it doesnt work for some reason. only when the page loads it executes once. i even tried a for loop but nothing..

http://jsfiddle.net/nycionx/9xS4j/4/

$(document).ready(function()
{
    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];

    function change(yo) 
    {
        var ranColor = Math.floor(color.length * Math.random());
        $(yo).css('background-color', color[ranColor]);
    }

    setInterval(change('#_1x1_1_1'), 1000);
    setInterval(change('#_1x1_1_2'), 1000);
    setInterval(change('#_1x1_1_3'), 1000);
    // etc etc... they wont execute every second, instead only ONCE when the page loads...??

    });

ps. eventually i want to add more to the functon where $(this) is concerned ie. $(this).css('color', color[ranColor]); etc etc

Upvotes: 2

Views: 355

Answers (3)

Lasithds
Lasithds

Reputation: 2291

Check the link to change colors together or randomly.. Hope it helps

$(document).ready(function(){

    var color = ['red', 'blue', 'green','orange', 'brown', 'pink', 'black', 'grey'];
    var obj = ['#_1x1_1_1', '#_1x1_1_2', '#_1x1_1_3', '#_1x1_1_4'];
    var obj2 = ['#_1x1_4_1', '#_1x1_4_2', '#_1x1_4_3', '#_1x1_4_4'];

    function change_rand(){ //chage to same color
        setInterval(function(){
            var ranColor = Math.floor(color.length * Math.random());
            for(i in obj){
                $(obj[i]).css('background-color', color[ranColor]);
            }
        }, 1000);
    }
    change_rand();

    function change_rand2(){ //change into random colors
        setInterval(function(){

            for(i in obj){
                var ranColor = Math.floor(color.length * Math.random());
                $(obj2[i]).css('background-color', color[ranColor]);
            }
        }, 1000);
    }
    change_rand2();

});

http://jsfiddle.net/9xS4j/11/

Upvotes: 0

musefan
musefan

Reputation: 48445

The Issue

The problem is the way you are calling setInterval, you need to pass a function, where as you are currently passing the result of a function, which won't do anything useful.

The Solution

The correct way to pass a function (rather than the result of a function) would be as follows:

setInterval(change, 1000);

However, this doesn't allow for specifying your parameters. To do that you can use an anonymous function and call your function (with parameters) from within that:

setInterval(function() { change('#_1x1_1_1'); }, 1000);

Here is a working example

The Better Solution

As you have quite a few squares, I would suggest you make use of the class selector and loop them. For example:

function change(element) {
    var ranColor = Math.floor(color.length * Math.random());
    element.css('background-color', color[ranColor]);
}

$.each($('.squares'), function (index, element) {
    setInterval(function () {
        change($(element));
    }, 1000);
});

Here is a working example

Upvotes: 1

MrCode
MrCode

Reputation: 64536

By using parenthesis () in the argument to setInteval, you are executing the change function immediately, not when the timer ticks. Instead you can do:

setInterval(function(){
    change('#_1x1_1_1');
}), 1000);

Or you can use .bind() to bind the argument without needing an anonymous function:

setInterval(change.bind(this, '#_1x1_1_1'), 1000);
setInterval(change.bind(this, '#_1x1_1_2'), 1000);
setInterval(change.bind(this, '#_1x1_1_3'), 1000);

Upvotes: 1

Related Questions