Самый простой способ почтить только самые последние события из серии javascript / jQuery - PullRequest
Новая
       19

Самый простой способ почтить только самые последние события из серии javascript / jQuery

3 голосов
/ 24 июня 2011

Я должен представить, что это распространенный вариант использования javascript / jQuery, так что извините, если это где-то еще на сайте, я искал его и не смог найти этот базовый вариант использования.

У меня есть видимый div (A). При наведении курсора на этот div отображаются некоторые другие div (B & C). При наведении курсора на любой из этих элементов (A, B или C) будут скрыты два показанных элемента (B & C).

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

Я попытался привести функцию typewatch в уравнение: 

var typewatch = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      }  
    })();

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

Для простоты понимания приведу jsfiddle точного случая: http://jsfiddle.net/tchalvakspam/KG3P9/7/

Но в целом, как я могу поймать несколько событий и почитать только самое последнее?

Ответы [ 2 ]

2 голосов
/ 24 июня 2011

Я использую e.preventDefault () с событиями jQuery, чтобы остановить распространение события вверх по дереву.

1 голос
/ 24 июня 2011

Это на самом деле то, что раньше беспокоило меня.Прежде чем анимировать, позвоните по номеру $.stop(), который зафиксирует любую существующую анимацию в ее дорожках, и возьмите новую цель, которую вы ей задаете. 

$("#container")
  .mouseenter(
    function(){
     $(".panels", this).stop(true, true).slideDown(); 
    })
  .mouseleave(
    function(){
     $(".panels", this).stop(true, true).slideUp();
    }
  );

Это следует документации, предоставленной вAPI jQuery для самого метода $.stop(), поскольку они представляют аналогичный пример с использованием одного изображения.

Демо: http://jsbin.com/adeqef/2/edit

...