Если элемент был «наведен» на 500 мс, запустите функцию с помощью jQuery

Question

Для здравомыслия моих пользователей, я хочу, чтобы событие 'mouseover' запускалось после того, как селектор был наведен на полсекунды, а не как только он наведет курсор на него.

Сначала я попробовал функцию setTimeout, но она работает сколько бы времени ни находился элемент, я не думаю, что слишком много думал об этом. Я также провел день (вкл. И выкл.) В поисках (и проигрывании Pacman), но безрезультатно.

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

$("#mySelector").mouseover(function(){
    // Run after 500ms
    $(this).addClass("hasBeen500ms");
});

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

Answer 1

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

$("#mySelector").mouseenter(function() {
  var el = $(this);
  var timeoutId = setTimeout(function() {
    el.addClass("hasBeen500ms");
  }, 500);
  el.mouseleave(function() {
    clearTimeout(timeoutId);
    el.removeClass("hasBeen500ms");
  });
});
​

Answer 2

Похоже, вы могли бы использовать плагин hoverIntent .

Answer 3

Другой вариант - отменить тайм-аут, если человек выдвинул мышь раньше, чем прошло 500 мс:

var timer;

$('#mySelector').mouseover(function() {
    timer = setTimeout( function() {$(this).addClass('hasBeen500ms');}, 500);
});

$('#mySelector').mouseout(function() {
    clearTimeout(timer);
});

Answer 4

.delay() не работал, так как .addClass() не является частью очереди анимации, поэтому вместо этого я решил анимировать что-то ноль (выбрал visibility:visible, поскольку вы не будете наводить курсор на невидимый элемент) и затем запустите добавить класс наведения в функции обратного вызова:

$('#mySelector').mouseenter(function(){
    $(this).animate({'visibility':'visible'},500,'swing',function(){
        $(this).addClass('hoverIntent');
    })
});

$('#mySelector').mouseleave(function(){
    $(this).removeClass('hoverIntent').stop().clearQueue();
});

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

Answer 5

Если вам нужно немного оптимизировать, вы можете использовать что-то подобное. Этот код адаптирован для контактов Google Maps, но вы поняли

google.maps.event.addListener(marker, 'mouseover', function(){
  this.timeout = setTimeout(markerClick.bind(this, false), 500)
  google.maps.event.addListener(this, 'mouseout', function(){
    if(this.timeout){
      clearTimeout(this.timeout)
      delete this.timeout
    }
    google.maps.event.clearListeners(this, 'mouseout');
  }.bind(this))
}.bind(marker))

Answer 6

Я пытаюсь опираться на ответ Web Logic

создать переменную для отслеживания, если мышь все еще находится над упомянутым элементом:

var isMouseOver=false;

$("#mySelector").mouseover(function(){
   isMouseOver=true;//set variable to gtrue
   setTimeout(function() {
                 if(isMouseOver){
                      $(this).addClass("hasBeen500ms");
                 }
              }, 500);
});

также устанавливает mouseout обратный вызов, поэтому мы можем отслеживать, если мышь все еще остается там через 500 мс.

$("#mySelector").mouseout(function(){
   isMouseOver=false;//set variable to false
});

надеюсь, что это работает!

Answer 7

Проверьте этот вопрос SO о настройке обратного вызова функции setTimeout.