摘要：比如，讓鼠標(biāo)在元素上停留規(guī)定時(shí)間內(nèi)才觸發(fā)事件。改進(jìn)部分保存當(dāng)前上下文的對(duì)象調(diào)用替換改完以后我自己的小項(xiàng)目都用這個(gè)方法來處理或者其他的延時(shí)效果了。

一開始鼠標(biāo)的hover事件我都會(huì)用css:hover偽類來實(shí)現(xiàn)，它的特點(diǎn)也很明顯，就是無延時(shí)立即觸發(fā)，但有時(shí)可能會(huì)造成一些干擾，想要用戶體驗(yàn)更好的話就要用js。
比如，讓鼠標(biāo)在元素上停留規(guī)定時(shí)間內(nèi)才觸發(fā)hover事件。我在一篇博文上找到一段比較好的處理代碼 ：
文章出處

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            // 鼠標(biāo)經(jīng)過的延時(shí)時(shí)間
            hoverDuring: 200,
            // 鼠標(biāo)移出的延時(shí)時(shí)間
            outDuring: 200,
            // 鼠標(biāo)經(jīng)過執(zhí)行的方法
            hoverEvent: function(){
                // 設(shè)置為空函數(shù)，綁定的時(shí)候由使用者定義
                $.noop();
            },
            // 鼠標(biāo)移出執(zhí)行的方法
            outEvent: function(){
                $.noop();    
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
            $(this).hover(function(){
                // 清除定時(shí)器
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent,
                    sets.hoverDuring);
                }, function(){
                    clearTimeout(hoverTimer);
                    outTimer = setTimeout(sets.outEvent,
                        sets.outDuring);
                });    
            });
    }      
})(jQuery);
    
// 具體使用，給id為“#test”的元素添加hoverEvent事件
$("#test").hoverDelay({
    // 自定義，outEvent同
    hoverEvent: function(){
        alert("經(jīng)過我！");
    }
});

這段代碼好在于把鼠標(biāo)經(jīng)過事件和延時(shí)分離出來，延時(shí)以及延遲的清除都交由hoverDelay來處理，具體hover事件自己自定，是一段能夠很通用的代碼。
但運(yùn)用起來還有些小問題，在自定義hoverEvent、outEvent中使用this的話，它所指向的是window這個(gè)對(duì)象，而不是當(dāng)前上下文，所以我改進(jìn)了下，通過apply()來實(shí)現(xiàn)this綁定。
改進(jìn)部分：

return $(this).each(function(){
        // 保存當(dāng)前上下文的this對(duì)象
        var $this = $(this)
        $this.hover(function(){
            clearTimeout(outTimer);
            hoverTimer = setTimeout(function () {
                // 調(diào)用替換
                sets.hoverEvent.apply($this);
            }, sets.hoverDuring);
        }, function(){
            clearTimeout(hoverTimer);
            outTimer = setTimeout(function () {
                sets.outEvent.apply($this);
            }, sets.outDuring);
        });
    });

改完以后我自己的小項(xiàng)目都用這個(gè)方法來處理hover或者其他的延時(shí)效果了。