Не в состоянии запустить несколько setInterval - PullRequest
Новая
       20

Не в состоянии запустить несколько setInterval

0 голосов
/ 27 сентября 2011

Я создаю функцию для регулярного обновления фоновой позиции узла HTML. Функция работает для одного узла, но при вызове нескольких узлов (в следующем примере) эта функция затрагивает только последний узел.

В соответствии с предупреждением (индекс) внутри функции, setInverval () вызывается для каждого узла.

Я не могу понять, почему это не вступает в силу.

http://jsfiddle.net/GqNgs/1/

var bgImgAnimate = function (settings) {
    $.each(settings.nodeList, function (index, node) {
        thisNode = $(node);

        var thisPosition;

        setInterval(function () {
                    alert(index);
        //calculate the position before position the image

            thisPosition = - settings.frameWidth * settings.currentFrame;

            thisNode.css('backgroundPosition', (thisPosition + 'px') + ' ' + (settings.verticalPos + 'px'));


        }, settings.interval);      
    });


};

var settings = {
    nodeList: $('#star1, #star2, #star3'),
    verticalPos: 0,
    currentFrame: 1,
    frameWidth: 26,
    startTime: 2,
    frameNumber: 10,
    interval: 200
}

bgImgAnimate(settings);

Ответы [ 2 ]

1 голос
/ 27 сентября 2011

Ваша переменная thisNode является глобальной, поэтому после выполнения вашей функции вы быстро перебираете все три элемента (то, что вы называете узлами), но когда это будет сделано, все три функции, которые будут выполняться с интервалом, будут ссылаться на один элемент (и, следовательно, будет изменен только один, тот факт, что ваши оповещения показали вам правильный ответ, объясняется тем, что каждое оповещение ссылается на index значение по-разному и правильно).

Простое исправление, измените: 

thisNode = $(node);

на: 

var thisNode = $(node);

http://jsfiddle.net/GqNgs/2/

Кроме того, вероятно, было бы более масштабируемым установить только одну функцию интервалаи каждый раз, когда это вызывается, перемещайте фон (или выполняйте любые необходимые манипуляции) для всех элементов, а не для каждого элемента в качестве интервала.

0 голосов
/ 27 сентября 2011

Это из-за того, что вы перебираете nodeList и каждый раз назначаете thisNode , а затем передаете его в интервал. Но происходит следующее: thisNode трижды переписывается (после цикла он обращается к узлу LAST) и ПОСЛЕ , что все три интервала выполняются с одинаковым thisNode переменная, которая на данный момент является последним узлом.

...