setInterval и clearInterval не работают должным образом - PullRequest
Новая
       20

setInterval и clearInterval не работают должным образом

2 голосов
/ 12 октября 2011

У меня есть эта функция, которая действует как окно загрузки, используя setInterval для изменения фоновых изображений, что создает эффект мигания. 

 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);
}

Но даже с clearInterval, если я нажму на нее больше, чемкак только мигание выходит из строя.Я пытался удалить ящики, скрывая их, но я не могу очистить «буфер»?Есть идеи?

Ответы [ 4 ]

3 голосов
/ 12 октября 2011

Причина, по которой он продолжает мигать, состоит в том, что при каждом вызове loading создается новая переменная start, поэтому clearInterval фактически ничего не делает.Вы также не должны иметь функцию boxes внутри loading, потому что она делает то же самое, создавая новую функцию boxes каждый раз, когда вызывается loading.Это добавит много лагов, если скрипт будет выполняться дольше. 

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++;
    }

}
1 голос
/ 12 октября 2011

Объявления функций «поднимаются» до вершины своей области видимости, это то, что нарушает порядок выполнения. Проверьте это: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

0 голосов
/ 12 октября 2011

Причина в том, что каждый раз, когда вы вызываете загрузку, он создает новый интервал или новый var start. Таким образом, если вы щелкнете по нему дважды, у вас есть две вещи, манипулирующие одними и теми же данными. Таким образом, вы должны иметь var start вне функции и clearInterval внутри. Поэтому каждый раз, когда вы вызываете загрузку, он очищает интервал и создает новый. 

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++;
    }
}
0 голосов
/ 12 октября 2011

возможно, вам стоит взглянуть на этот плагин Jquery, похоже, он очень хорошо справляется с интервалами.

Плагин Jquery Timers

...