Получить «эту» ссылку для настраиваемого события

Question

Я пытаюсь преобразовать рабочий код JS в код jQuery, но я провалился с нескольких часов. Существует JsFiddle для:

http://jsfiddle.net/TyrionGraphiste/otx1hx7h/

Красный один элемент работает (он использует код JS).

И есть JS код:

var hoverIntent = function (element, handler, minDuration, callback, duration) { 

    var timeout = null; 

    element.on("mouseover", function() { 
     timeout = setTimeout(handler, minDuration); 
    }); 

    element.on("mouseout", function() { 
     var clear = function() { 
      clearTimeout(timeout); 
     }; 

     setTimeout(function() { 
      callback(), clear(); 
     }, duration); 

     clear(); 
    }); 
}; 

/* Test */ 

var element = $("#element"); 

hoverIntent(element, function() { 

$(element).animate({ 
    height: "80px"}, 200); 
}, 1000, function() { 
    $(element).animate({height: "50px"}, 200); 
}, 1000); 

И здесь, то JQuery код:

/* jQuery Event */ 

    $("body > div.test").on("hoverDuration", function (e, options) { 
     var 
      handler = options.handler, 
      minDuration = options.minDuration || 0, 
      callback = options.callback, 
      duration = options.duration || 0, 
      timeout = null, 
      clear; 

      console.log(options); 

      $(this).on({ 
       mouseover: function() { 
        timeout = setTimeout(handler, minDuration); 
       }, 
       mouseout: function() { 
        clear = function() { 
         clearTimeout(timeout); 
        }; 

        setTimeout(function() { 
         callback(), clear(); 
        }, duration); 

        clear(); 
       } 
      }); 
    }); 

    $("body > div.test").hoverDuration({ 
     handler: function() { 
      console.log($(this)); 
      $(this).animate({ 
       height: "80px" 
      }, 200); 
     }, 
     minDuration: 1000, 
     callback: function() { 
      $(this).animate({ 
       height: "50px" 
      }, 200); 
     }, 
     duration: 1000 
    }); 

В коде Jquery на этой линии:

... 
handler: function() { 
    console.log($(this)); // this one 
$(this).animate({ ... 

Я хотел бы получить "this «относительно целевого объекта HTML, но на данный момент он регистрирует окно, а не объект.

Я попробовал тоже, как в документации здесь: https://learn.jquery.com/events/introduction-to-custom-events/

но никак .. Кто-то может мне помочь?

Answer 1

Обратный вызов setTimeout вызывается в контексте глобального объекта. Вместо этого вам нужно предоставить контекст элемента. Один из способов заключается в использовании Function.prototype.bind или JQuery вы можете использовать $.proxy функцию:

mouseover: function() { 
    timeout = setTimeout($.proxy(handler, this), minDuration); 
}, 

Если вы не поддерживаете IE8, то setTimeout(handler.bind(this), minDuration);