2010-08-03 4 views
2

Я работаю над плагином jQuery (виджетами jQuery UI), который называется Smooth Div Scroll, где мне нужно хранить ссылки на интервалы, относящиеся к каждому отдельному экземпляру плагина на странице. Если я просто написать что-то вроде этого:Хранить интервал javascript в объекте jQuery element.data?

 
var myInterval = setInterval(function() { 
    alert("Hi!"); 
}, 100); 

... переменная myInterval фактически будет window.myInterval и поделят все экземпляры плагина на странице. Поэтому, когда я пытаюсь установить или очистить интервал для экземпляра, интервал для всех экземпляров будет установлен/очищен, так как все они ссылаются на одну и ту же переменную окна.

Просмотрев API jQuery, я нашел метод .data, который используется для хранения произвольных данных, связанных с согласованными элементами, и поскольку каждый экземпляр плагина имеет соответствующий элемент DOM. Отлично! Используя этот метод, я могу хранить данные, специфичные для согласованного элемента. Поэтому я структурировали свой код, как это (где эль является ссылкой на согласованный элемент):

 
el.data("myInterval", setInterval(function() { 
    alert("Hi!"); 
}, 100)); 

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

Я не сделал никакого глубокого копания в фактических значениях, но если у меня есть три экземпляра плагина на одной странице, а интервал установлен на 5, как это:

 
el.data("myInterval", setInterval(function() { 
    alert("Hi!"); 
}, 5)); 

... только начнется первый экземпляр. Если я увеличу его до 20-30, начнутся два экземпляра, и если я увеличу его до, скажем, 50, все три экземпляра начнутся. Это так странно?!

Мои вопросы таковы:

хранит ссылку на интервал (с использованием .data) хорошая идея? Если да, то что может быть причиной неудачных интервалов?

Пожалуйста, помогите мне с этим - я в тупике! Если вы хотите получить исходный код, ознакомьтесь с плагиной (ссылка в верхней части этого сообщения).

/Томас Кан

+1

Это итерация '.each()'? –

+2

Эталонная идея в порядке, хотя интервал кажется мне очень маленьким. Что вам нужно повторять 200 раз в секунду? –

+0

Я использую setInterval для плавного прокрутки элементов на веб-странице, поэтому мне нужен быстрый интервал для получения гладкой анимации, но, как вы говорите, я сомневаюсь, что прокрутка на самом деле получает частоту кадров 200 кадров в секунду, когда я устанавливаю интервал 5. – tkahn

ответ

0

Посмотрев глубже в код и немного проверив его, похоже, проблема не связана с хранением интервалов в файле el.data. Интервалы хранятся просто отлично. Я подозреваю, что проблема связана с процедурами, которые выполняются в неправильном порядке в коде. Правильный порядок должен быть:

  1. нагрузки кусок HTML-контента (изображений) с использованием нагрузки Jquery (в).
  2. Рассчитать общую ширину всех эти элементы.
  3. Запустите интервал , который прокручивает эти иммаги.

Проблема заключается в том, что процедура, которая вычисляет полную ширину всех элементов, запускается до/в то же время, когда содержимое загружается через AJAX с использованием нагрузки jQuery. Результатом является то, что вычисленная общая ширина загруженных элементов равна 0 (ноль), и процедура прокрутки перемалывается до остановки, поскольку нет смысла прокручивать то, что имеет ширину нуля.

1

Возвращаемое значение setInterval и SetTimeout лишь целые числа, используемые внутри, чтобы ссылаться на время ожидания, поэтому хранить целое число с .data не является проблемой.

+0

Мне нужно сохранить интервал в переменной, доступной в любом месте кода, чтобы я мог очистить ее, когда она больше не должна запускаться. – tkahn