Question

I am using jQuery to generate and add a random amount of Clouds to the Header of the page and move them left on the specified interval. Everything is working fine, execpt the interval only runs once for each Cloud and not again. Here is my code:

if(enableClouds) {
    var cloudCount = Math.floor(Math.random() * 11); // Random Number between 1 & 10

    for(cnt = 0; cnt < cloudCount; cnt++) {
        var cloudNumber = Math.floor(Math.random() * 4);
        var headerHeight = $('header').height() / 2;
        var cloudLeft = Math.floor(Math.random() * docWidth);
        var cloudTop = 0;
        var thisHeight = 0;
        var cloudType = "one";

        if(cloudNumber == 2) {
            cloudType = "two";
        }else if(cloudNumber == 3) {
            cloudType = "three";
        }

        $('header').append('<div id="cloud' + cnt + '" class="cloud ' + cloudType + '"></div>');

        thisHeight = $('#cloud' + cnt).height();
        headerHeight -= thisHeight;
        cloudTop = Math.floor(Math.random() * headerHeight);

        $('#cloud' + cnt).css({
            'left' : cloudLeft,
            'top' : cloudTop
        });

        setInterval(moveCloud(cnt), 100);
    }

    function moveCloud(cloud) {
        var thisLeft = $('#cloud' + cloud).css('left');

        alert(thisLeft);
    }
}

Any help is appreciated!

Answer 1

This is the way to go:

 setInterval((function(i){
      return function(){
         moveCloud(i);
      };
 })(cnt), 100);