Add delay to "_on" mouseenter

Question

I want to add a delay on this mouseenter shown below. Can anybody help me with this "_on" method, pls? I tried with setTimeout, but it won't work.

This is the code:

declareEvents: function () {   
                var me = this,
                $el;

                $.each(me._$listItems, function (i, el) {
                    $el = $(el);    
                me._on($el, 'mouseenter', $.proxy(me.onListItemEnter, me, i, $el));
},

What I've tried:

setTimeout(function() {
    me._on($el, 'mouseenter', $.proxy(me.onListItemEnter, me, i, $el));
}, 1000);

And:

me._on($el, 'mouseenter', setTimeout(function() {
    $.proxy(me.onListItemEnter, me, i, $el);
}, 1000);

Thank you very much for you help!

Don't listen to any events on the items itself, but on their parent. And you are looking at a simple [debounce](http://davidwalsh.name/javascript-debounce-function) function. — nietonfir, May 22 '15 at 16:10

score 3 · Answer 1 · answered May 22 '15 at 15:13

3

You should wrap handler in anonymous function and clear any previous timeout:

me._on($el, 'mouseenter', function () {
    clearTimeout($(this).data('timeout'));
    $(this).data('timeout' , setTimeout(function () {
        $.proxy(me.onListItemEnter, me, i, $el);
    }, 1000));
});

And maybe clear timeout on mouseleave too.

answered May 22 '15 at 15:13

A. Wolff

74,033
9
94
155

Thank you for your answer, unfortunately it don't work for me. I put more from the code in my Question, maybe it will help to figure out my problem. – user3009162 May 22 '15 at 16:00
1

@user3009162 Does the original code, without the delay, work? – redbmk May 22 '15 at 16:23
1

@user3009162 You should provide sample which replicates your issue as e.g a jsFiddle – A. Wolff May 22 '15 at 16:48

score 1 · Answer 2 · answered May 22 '15 at 17:04

jQuery UI's code has an example of setting multiple events using _on in a widget. This will allow you to easily remove the timeout on mouseleave, as A. Wolff suggested.

declareEvents: function() {
  var me = this;

  $.each(me._$listItems, function(i, el) {
    var $el = $(el);
    clearTimeout($el.data("hoverTimeout"));

    me._on($el, {
      mouseenter: function () {
        $el.data("hoverTimeout", setTimeout($.proxy(me.onListItemEnter, me, i, $el)));
      },
      mouseleave: function () {
        clearTimeout($el.data("hoverTimeout"));
      },
    });

  });
}

Add delay to "_on" mouseenter

2 Answers2