Нужно детально понять простой код?

Question

[mydarck]

$('#ddmenu li').hover(function () {
  clearTimeout($.data(this,'timer'));
  $('ul',this).stop(true,true).slideDown(200);
}, function () {
  $.data(this,'timer', setTimeout($.proxy(function() {
  $('ul',this).stop(true,true).slideUp(200);
}, this), 100));

Думаю, что по приведенному выше коду мой уровень знания JQuery очевиден.
Код элементарный и общий принцип его работы я понимаю. Однако, некоторые моменты для меня не являются явными.
Например вот эта строка: clearTimeout($.data(this,'timer')); Если не сложно объясните детально и максимально доходчиво что тут к чему.

Answer 1

[Сергей delphinpro]

$('#ddmenu li').hover( // обрабатываем событие :hover
  // В this у нас будет элемент li

  // Начинайте читать со второй функции, будет понятнее

  // функия выполнится при наведении мыши
  function () {
    // Достать из data-атрибута* ссылку на таймер и очистить его
    // Таким образом, если мы увели мышку с элемента, и тут же 
    // сразу навели обратно, не будет моргания выпадашки
    clearTimeout($.data(this,'timer'));
    // Выбираем ul внутри наведенного li
    // Останавливаем анимации, если они не успели закончится
    // И начинаем новую анимацию slideDown (показываем выпадашку)
    $('ul',this).stop(true,true).slideDown(200);
  },

  // функия выполнится при уходе мыши
  function () {
    // В this (элемент li) в data-атрибут* под именем timer запишем 
    // результат функции setTimeout (ссылка на таймер)
    $.data(this,'timer', setTimeout(
      // Proxy "протаскивает" контекст this внутрь функции
      $.proxy(
        function() { // Функция, внутрь которой пробросится контекст
            // Благодаря прокси здесь this по-прежнему указывает на li
            // Получается мы выбираем ul внутри наведенного li
            // Останавливаем анимации, если они не успели закончится
            // И начинаем новую анимацию slideUp (скрываем выпадашку, видимо)
            $('ul',this).stop(true,true).slideUp(200);
        },
        this // пробрасываемый контекст - наведенный элемент
      ),
      100 // таймаут, через 0.1 сек после ухода мыши выполнится функция закрытия
    ));
  }

);

* Не совсем верно. Данные пишутся не в data-атрибут. jQuery использует собственное хранилище данных. но сути это особо не меняет, а для понимания легче.

Comments

[mydarck]

То что нужно, огромное спасибо.

Answer 2

[Алексей Скляров]

Для того, чтобы понять что тут написано не обязательно задавать вопрос, достаточно погуглить конструкцию $.data(): https://api.jquery.com/jquery.data/ и clearTimeout(): javascript.ru/cleartimeout

Comments

[mydarck]

Я погуглил и прочел и про $.data(), и про clearTimeout(). Но их совместное понимание вызволило у меня небольшие трудности. По большому счету 90% вопросов можно решить с помощью поисковых систем и это как раз очевидно, но зачем же об этом писать?

[Алексей Скляров]

mydarck: потому что так полезнее. Когда люди просят им что-то объяснить/сделать/показать, как правило все равно остаются вопросы. Прелесть собственноручного поиска решения задачи в том, что вы будете как разработчик расти быстрее. Вот и все.

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

[mydarck]

Алексей Скляров: Спорный момент.