JavaScript Timing

Question

I want to select all the elements of a class. Then change that class to another class . After 0.5 seconds i want to revert the elements back to their original class. I must do this 8 times in a row. Even though my code achieves that(in a way) i can't see the color changes in the buttons . Can anyone help me ? it's a timing problem i guess. Here is the js code :

$(document).ready(function(){
    $('#start').click(function(){
        game();
    })

    function game(){
        var ordine = new Array();
        for(var t = 1; t <= 8; t++){
            var y = 0;
            for (var k = 0; k < t; k++) {
                var x = Math.floor((Math.random() * 4) + 1);
                ordine[y++] = x;
                change1(x);
                setTimeout(change2(x), 500);
            }
        }
    }

    function change1(y){
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        $("." + z).removeClass(z).addClass(t);
    }

    function change2(y){
        var z = 'cls' + y + 2;
        var t = 'cls' + y;
        $("." + z).removeClass(z).addClass(t);
    }
})

Here you can find the full code(html,css and js) http://jsfiddle.net/Cx5VK/2/

You've run into some trouble with closures. Here's some more recommended reading -> http://stackoverflow.com/questions/111102/ — blgt, Jul 10 '14 at 08:43

UweB · Answer 1 · 2014-07-10T08:53:48.187

5

The problem is in the following line:

setTimeout(change2(x), 500);

You are calling the function change2 here, passing its return value to setTimeout. What you actually want though is to call the change2 function after 500ms. Change your code to:

setTimeout(function() { change2(x); }, 500);

That way, you are passing an anonymous function to setTimout, which will then be executed by it after 500ms.

EDIT: I've modified your JSFiddle: http://jsfiddle.net/Cx5VK/7/ stripping out a lot of code that didn't do anything in that sample (you quite possibly need it elsewhere):

$(document).ready(function () {
    $('#start').click(function () {
        game();
    })

    function game() {
        var x = Math.floor((Math.random() * 4) + 1);
        change1(x);
    }

    function change1(y) {
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        $("." + z).removeClass(z).addClass(t);
        setTimeout(function() { change2(y); }, 500);
    }

    function change2(y) {
        var z = 'cls' + y + 2;
        var t = 'cls' + y;
        $("." + z).removeClass(z).addClass(t);
        game();
    }
});

Now, the game function simply gets a random number and calls change1 with that number as parameter. change1 itself will set the timeout to reset the color for that square via change2. At the end of that function, the game is "restarted" by a simple call to game(), to get another random number and so on and so forth. I hope this is what you were looking for.

edited Jul 10 '14 at 08:53

answered Jul 10 '14 at 08:39

UweB

4,080
2
16
28

you are indeed right , but it seems i have a problem with the way i thought about the problem. I need 1 of the buttons to turn to another color then after 0.5 seconds i want that button reverted back to it's original color . After that i need the next button to change color and so on . The code i have just changes back the last button it seems ... help ? – Lucian Tarna Jul 10 '14 at 08:42
i need to stop for iterating before change2 is finished. And i can't find a wait function – Lucian Tarna Jul 10 '14 at 08:43
I've modified the answer, adding code - hope it helps. :) – UweB Jul 10 '14 at 08:55
that is for an infinite number of iteratios, isn't it ? i just want 8. I need a sequence of 8 random numbers from 1-4 (because i have 4 buttons and each button has a number) . This sequence i want it in an array in order(so if the first random number was 1 then the first number in that array is 1), after that i want the button with the number 1 to change color(which i do by changing the class) after exactly 0.5 miliseconds i want button 1 to change back and i want another random number. The process must repeat 8 times.. this is what i am trying to do :(. – Lucian Tarna Jul 10 '14 at 09:21
I need to stop it after a certain number of iterations. Because the game is gradual , first level just 1 button changes, 2nd level 2 buttons change and in the 8th level i have a sequence of 8 button changes . I am sorry i am writing so much :)) ! only if you have the time bother to answer me i am trying to figure it out myself. Your answer is perfect :D – Lucian Tarna Jul 10 '14 at 09:23

JavaScript Timing

1 Answers1