setInterval和clearInterval无法按预期工作

Question

I have this function which acts as a loading box using setInterval to change the background images which creates a flashing effect.

 function loading() {
    clearInterval(start);

    var i = 0;
    function boxes() {

        in_loading = ".in_loading:eq("  + i + ")";
        $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
        $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

        if(i == 3) {
            i = 0;
        } else {
            i++;
        }

    }
    var start = setInterval(function() {
        boxes();
    }, 350);
}

But even with clearInterval if I click on it more than once the flashing goes out of order. I tried removing the boxes, hiding them but I can't seem to get the 'buffer' cleared? Any ideas?

Answer 1

The reason why it keeps flashing is because every time loading gets called it creates a new variable start , so clearInterval is actually doing nothing. You also shouldn't have the boxes function within loading because it is doing the same thing, creating a new boxes function every time loading is called. This will add a lot of lag the longer the script executes.

var i = 0;
var start;
function loading() {
    clearInterval(start);

    start = setInterval(function() {
        boxes();
    }, 350);
}

function boxes() {

    var in_loading = ".in_loading:eq("  + i + ")";
    $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
    $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

    if(i == 3) {
        i = 0;
    } else {
        i++;
    }

}

Answer 2

Function declarations get "hoisted" to the top of their scope, this is what is messing the execution order. Check this: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Answer 3

The reason is every time you call loading it creates a new Interval or new var start . So if you click it twice, then you have two things manipulating the same data. So you need to have the var start outside of the function and the clearInterval inside. So every time you call loading it clears the interval and creates a new one.

var i = 0;
var start;
function loading() {
    clearInterval(start);

    start = setInterval(boxes, 350);
}

function boxes() {

    in_loading = ".in_loading:eq("  + i + ")";
    $(".in_loading").css("background", "url(images/load_bar_green.png)  no-repeat");    
    $(in_loading).css("background", "url(images/load_bar_blue.png)  no-repeat");        

    if(i == 3) {
        i = 0;
    } else {
        i++;
    }
}

Answer 4

maybe you should take a look at this Jquery Plugin , it seems to manage intervals very well .

Jquery Timers Plugin