Написание подключаемого модуля Mousestop с использованием jQuery

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

Я хотел перестроить эту функциональность и закончил тем, что написал свой собственный маленький плагин для mousestop в jQuery, которым я поделился. Это довольно простой маленький фрагмент кода, который в основном срабатывает, когда мышь останавливается над определенным элементом с несколькими опциями для таймеров.

Вы можете проверить документацию здесь: плагин jQuery mousestop
Также проверьте это в действии с моим плагином всплывающей подсказки здесь: плагин всплывающей подсказки jQuery

1. Событие остановки мыши

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

var movementTimer = null; $("#element").mousemove(function(e) { clearTimeout(movementTimer); movementTimer = setTimeout(function() { //do something here }, 300); }) 

2. Остановка таймера при наведении мыши

У нас работает mousestop, но что теперь происходит, когда мы отключаемся от элемента? Мы бы не хотели, чтобы событие mousestop сработало, поскольку технически мы не останавливаемся на элементе. Все, что нам нужно сделать здесь, это добавить событие mouseout, которое очищает наш таймер, чтобы убедиться, что оно не выполняется.

 var movementTimer = null; $("#element").mouseout(function(e) { clearTimeout(movementTimer); }) 

3. Установка льготного периода

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

 var counter = 0; var counterMax = 20; var movement = false; elem .mouseover(function(e) { movement = true; //check if movement has stopped to a maximum time of 100*counterMax, after that event will not run at all unless you re-mouseover displayTimer = setInterval(function() { counter++; if(counter < counterMax) { if(!movement) { //run some code } //else do nothing, just iterate } }, 100) }) [/js] This starts a timer that checks to see if movement has stopped, which would be set by our previous timer. The max here is 20 intervals for 100 milliseconds each giving us a two second grace period. Since this timer now controls our function, if it does not execute within the grace period, we are done. 
  4. Получение правильных координат
 Здесь есть еще один важный момент, который мы должны добавить.  Так как мы запускаем это из события mouseover, наши координаты event.pageX и event.pageY будут от того места, где они вошли в элемент, однако нам, вероятно, понадобится положение мыши там, где оно находится сейчас, пока мышь движется вокруг.

 [JS]
     var x = null;
     var y = null;

     var motionTimer = null;

     $ ( "# Элемент"). MouseMove (функция (е)
     {
    	 x = e.pageX;
    	 y = e.pageY;
     }) 

5. Соединяем все вместе

Теперь мы можем собрать все это в плагин, как показано ниже. Этот маленький плагин jQuery имеет менее 100 строк кода и размер менее 1 КБ при минимизации.