How to hide/show multiple square at different time

I'm st开发者_Go百科ill struggling with my simple javascript game. Here is my previous question: Simple javascript game, hide / show random square

Some square show and hide randomely for a few seconds and you have to click on them. I use RaphaelJS to draw the square and a few of JQuery ($.each() function)

I can't make the hide/show with the setInterval working for each square. The function made by Mishelle looks good but I get a "This is not a function" error.. I've test different stuff but it's not as obvious as I thought :/

window.onload = function() {  

    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    // random function to for the x and y axis of the square
    function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;  
    }
    var rectanglemain = paper.rect(0, 0, 500, 500).attr({fill: "white",});
    var win_click = 0; // set the var to count the click on the square
    var recs = [];
    for(var i = 0; i < 50; i++) {
        var x = random(1,450);
        var y = random(1,450);
        var rec = paper.rect(x, y, 50, 50).attr({fill: 'blue'});
        recs.push(rec); // add the square in an array
        recs[i].click(function () {
        //counting the clicks
        win_click = win_click + 1;
        })
        function hideSquare() {recs[i].hide();}
        hideSquare();
    }   
    rectanglemain.click(function () {
        alert('you click on ' + win_click + ' squares');
    }); 
     /* here is a function made by Mishelle on my previous question, unfortunately I can't make it work (this is not a function error).
function showBriefly (timeFromNow, duration) {
        window.setTimeout(this.rec.show, timeFromNow);
        window.setTimeout(this.rec.hide, timeFromNow + duration);
        }
     recs[2].showBriefly(1000, 3000); to test the function
*/
}

Thanks for the help :)

try

window.setTimeout(function(){this.rec.show();}, timeFromNow )

Just came across your problem, just in case you read this and you want to know what was the problem. this is undefined within the callback, thus you need to store which rectangle you were referring to in a variable (I've called it square), see my code:

showBriefly: function(timeFromNow, duration) {
    square = this.box;
    setTimeout(function(){square.show();}, timeFromNow )
    setTimeout(function(){square.hide();}, timeFromNow + duration )
}

Cheers