Как я могу получить несколько функций Javascript setInterval для приятного совместного воспроизведения на одной странице? - PullRequest
Новая
       8

Как я могу получить несколько функций Javascript setInterval для приятного совместного воспроизведения на одной странице?

1 голос
/ 23 июня 2011

Я написал несколько пользовательских анимационных функций в виде плагинов jQuery, используя setInterval() для цикла.

Функции, похоже, работают сами по себе, но когда я пытаюсь включить более одной из них вНа той же странице время и эффекты все перепутаны и не отображаются или не завершаются должным образом!

Я провел некоторые исследования в stackOverflow и Google, и из того, что я могу понять, проблема в том, что setInterval действует как«глобальный» метод / свойство объекта window, и поэтому, когда у меня есть более одного на странице, они перезаписывают друг друга!

Это правильно?И если да, то каково решение?Что jQuery / плагины делают для управления своими собственными уникальными функциями интервалов?

Мне было интересно, можно ли установить 'local' setInterval как уникальное свойство для каждого из моих объектов плагинов?

- ИЛИ -

Если мне нужно создать функцию для управления несколькими вызовами анимации из различных плагинов / функций, чтобы совмещать их все одним глобальным вызовом setInterval - Но я понятия не имею, каксделать это!

Может кто-нибудь помочь, пожалуйста?

---- edit ---- 

(function($){
    $.fn.scroller = function(options) {

        var defaults = {
            direction: 'left',
            distance: '',
            duration: 2000,
            interval: 2000,
            type: 'linear',
            startPos: '0'
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            parent = $(this).children('.scroller');
            $this = parent.children().first();

//          console.log(parent);
//          console.log($this);

            var o = options;
            var m = '';

            if(o.direction === 'left') m = 'marginLeft';
            if(o.direction === 'right') m = 'marginRight';
            if(o.direction === 'up') m = 'marginTop';
            if(o.direction === 'down') m = 'marginBottom';

//          console.log('Distance: ' + o.distance);
//          console.log('Duration: ' + o.duration);
//          console.log('Type: ' + o.type);
//          console.log('Start Pos: ' + o.startPos);
//          console.log('Interval: ' + o.interval);

            setInterval(function(){
                $this.animate({
                    m : o.distance
                },
                o.duration,
                o.type,
                function() { // OnComplete
                    $this.stop().css(m, o.startPos).appendTo(parent);
                });
            }, o.duration+o.interval);
        });
    };
})(jQuery);

Ответы [ 2 ]

1 голос
/ 23 июня 2011

Обновление

Мне кажется, я вижу проблему. Вы определяете $ this как глобальную переменную. Таким образом, вызовы setInterval будут использовать одну и ту же переменную $ this. Попробуйте var $this = .... То же самое для parent. Также обратите внимание, что в обратном вызове $this.animate «this» должно ссылаться на анимированный элемент dom, поэтому вы можете сделать $ (this), чтобы получить для него объект jQuery.

Я думаю, что ваша проблема может заключаться в том, что вы теряете контекст с помощью setInterval. Объект this может не соответствовать ожидаемому. Если вы ожидаете, что переменная будет присутствовать (потому что она была определена рядом с тем местом, где вы вызываете setInterval), это, вероятно, не будет.

Затворы могут вам помочь. Попробуйте 

setInterval(function(){
    //code here
});

Вместо 

setInterval(myPreDefinedFunction);

Также попытайтесь убедиться, что вы используете локально определенные переменные в вашем обратном вызове setInterval, а не глобальные: 

var myVar = 5;

вместо 

myVar = 5;

Если бы вы использовали второй метод, вы бы в итоге поделили переменную между обратными вызовами.

0 голосов
/ 23 июня 2011

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

...