为 jQuery mouseover 事件应用延迟尝试了 hoverintent 但我想动态地做

Question

为 jQuery 鼠标悬停事件应用延迟尝试过 hoverintent 但我想动态执行。

jQuery(document).on('mouseover', 'span[id^=viewLCmnt_]', function() {
    function ajaxTest();
});

我想在完成第一个鼠标悬停事件之前添加延迟并且不触发其他鼠标悬停。现在事件触发得如此之快以至于看起来很奇怪。

如何在鼠标悬停事件上添加延迟或仅触发单个 ajax 函数。

这样尝试过

var delay = 1000;
var area = jQuery('span[id^=viewLCmnt_],i[id^=viewLThumb_]');
area.on( 'mouseenter', function() {
    jQuery(this).data( 'mouseIsOver', true );
});
area.on( 'mouseleave', function() {
    jQuery(this).data( 'mouseIsOver', false );
});
area.on( 'mouseover', function() {
    setTImeout( function() {
        if( area.data( 'mouseIsOver' ) ) {
            area.trigger( 'mouseoverdelay' );
        }
    }, delay );
});
area.on( 'mouseoverdelay', function() {
    lv(jQuery(this), jQuery('#site').val());
});

通过以下代码解决：

var timer;
jQuery("body").on("mouseenter", "span[id^=viewLCmnt_],i[id^=viewLThumb_]", function(){
    timer = setTimeout(function () {
        lv(jQuery(this), jQuery('#site').val());
    }, 2000);
}).on("mouseleave", "span[id^=viewLCmnt_],i[id^=viewLThumb_]", function(){
    clearTimeout(timer);
});

Answer 1

var delay = 1000;

$( ... ).on({
    mouseenter : function() {
        var $area = $(this);
        $area.data( 'mouseIsOver', true );
        // Create a scope for async problems.
        (function( $areaRef ) {
            setTimeout( function() {
                if( $areaRef .data( 'mouseIsOver' ) ) {
                    $areaRef .trigger( 'mouseoverdelay' );
                }
            }, delay );
        })( $area );
    },
    mouseleave : function() {
        $(this).data( 'mouseIsOver', false );
    },
    mouseoverdelay : function() {
       // Your stuff
    }
});

PS：没有测试这个。