события мыши ползунка jquery в FireFox

0

У меня есть ползунок jquery (v 1.8.16), который вызывает перерисовку элемента canvas в событии слайда. Рисунок холста занимает примерно 40 мс как в FireFox, так и в Chrome.

Ниже приведен фрагмент кода слайд-события - довольно простой:

    $( $rSlider).on( "slide", function( event, ui ) {
        DrawAllDataSets(ui.value);

    } );

Проблема в том, что слайдер становится "застрявшим" в FireFox до тех пор, пока события мыши слайдера не прекратятся (т.е. ползунок больше не перемещается), а затем проходит серия "слайдов" событий. В Chrome & IE события ползунка текут немедленно, и ползунок реагирует, когда пользователь тянет, и холст рисуется соответствующим образом.

Если функция DrawAllDataSets удалена, ползунок нормально реагирует на FireFox.

Моя первоначальная мысль заключалась в том, что рисование холста занимает слишком много времени, но 40 мс, что сопоставимо с хромом и т.е. Кажется разумным.

Любые мысли оцениваются.

Теги:
canvas
slider
events
mouse

1 ответ

1
Лучший ответ

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

Например, перемещение мыши, которое запускает ваш ползунок для перемещения, часто срабатывает 30-40 раз в секунду. Таким образом, математика: 1000ms/40events == 25ms между запущенными событиями слайдера.

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

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

Затем создайте отдельный цикл requestAnimationFrame, который будет рисоваться только в соответствии с последними свойствами чертежа. Цикл не будет пытаться нарисовать все изменения, которые задает ползунок, он просто нарисовал последнее изменение.

  • 0
    Марк - спасибо за предложение, я думаю, что это правильное решение. Результаты, которые я видел, являются положительными для FireFox - он больше не «залипает». По какой-то причине Chrome работает медленнее, чем без цикла requestAnimationFrame. В целом, Chrome и IE выполняют операции рисования намного лучше, чем Firefox.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню