IE сглаживает панорамирование карты при перетаскивании - PullRequest
1 голос
/ 02 февраля 2010

Я пытаюсь сгладить производительность приложения карты, которое я создавал с использованием javascript. Я изначально реализовал перетаскивание, используя

  • OnMouseDown
  • OnMouseMove
  • OnMouseUp

Однако в IE это выглядит очень вяло, и кажется, что когда вы перемещаете курсор очень быстро, карта не обновляет свое положение, пока вы не перестанете двигаться.

Я преобразовал свой код, чтобы использовать нативные события IE

  • ondragstart
  • ondrag
  • ondragend

Производительность была НАМНОГО лучше при использовании этих событий, НО кажется, что я не могу установить курсор мыши, используя стандартные свойства CSS. Я могу только установить курсор на несколько предопределенных, что не то, что я хочу.

Итак, мой вопрос. Как можно сгладить перетаскивание в IE, используя первый набор событий, или как установить собственный курсор, используя собственные события.

РЕДАКТИРОВАТЬ: Пример кода

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

// the "this" object refers to the div containing all the tile layers.
function movemap(e) 
{ 
   e = e || window.event;
   var dx = this.mouseX - e.clientX; 
   var dy = this.mouseY - e.clientY; 

   if (dx !== 0 || dy !== 0) {
      this.style.left = parseInt(this.style.left) + dx + 'px'; 
      this.style.top = parseInt(this.style.top) + dy + 'px'; 
      this.mouseX = e.clientX; 
      this.mouseY = e.clientY;
   }
} 

1 Ответ

1 голос
/ 03 февраля 2010

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

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

Это означает, что у вас есть две возможности: 1. оптимизировать код внутри события, чтобы он занимал меньше процессорного времени, или 2. сделать ваше событие асинхронным и реализовать собственную логику мьютекса / семафоры.

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

Давным-давно я также выполнил некоторую асинхронную диспетчеризацию событий из-за тяжелого выполнения кода. Это сработало для меня. Может быть, это будет работать для вас тоже.

...