Добавить задержку на «_on» mouseenter

Question

Я хочу добавить задержку на этот указатель мыши, показанный ниже. Может ли кто-нибудь помочь мне с этим методом «_on», PLS? Я попробовал с setTimeout, но это не сработает.

Это код:

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

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

Что я пробовал:

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

И:

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

Большое спасибо вам помочь!

Answer 1

Вы должны обернуть обработчик в анонимной функции и очистить все предыдущие ожидания:

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

А может быть, очевидно, время ожидания на mouseleave тоже.

Answer 2

jQuery UI's code имеет пример установки нескольких событий с использованием _on в виде виджета. Это позволит вам легко удалить таймаут на mouseleave, как предложил А. Вольф.

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")); 
     }, 
    }); 

    }); 
}