jquery - 带定时器的鼠标输入功能

Question

如何在脚本中添加计时器？我希望“mouseenter”功能在启动前等待 1 秒。

$(".products_grid li").mouseenter(function(){
var $activeImage = $(this).find("img").attr("src");
var $imgZoom = '<div class="imgzoom"><img src="'+$activeImage+'" width="" height=""></div>';
    $($imgZoom).hide().appendTo(this).fadeIn();
}).mouseleave(function(){
    $("div.imgzoom").fadeOut().remove();
})

Answer 1

使用 JavaScript 的setTimeout，将您的代码包装在另一个匿名函数中，代理传递当前this引用：

$(".products_grid li").mouseenter(function(){
   $.proxy(setTimeout, this, function(){
       var $activeImage = $(this).find("img").attr("src");
       var $imgZoom = '<div class="imgzoom"><img src="'+$activeImage+'" width="" height=""></div>';
       $($imgZoom).hide().appendTo(this).fadeIn();
    }, 1000);
}).mouseleave(function(){
       $("div.imgzoom").fadeOut().remove();
})

Answer 2

使用setTimeout方法

将您的代码封装在方法中并将其分配给变量。

然后清除鼠标离开的超时。

var timer;

$(".products_grid li").mouseenter(function () {
    var $activeImage = $(this).find("img").attr("src"),
        $imgZoom = '<div class="imgzoom"><img src="' + $activeImage + '" width="" height=""></div>',
    that = this;

    timer = setTimeout(function () {
        $($imgZoom).hide().appendTo(that).fadeIn();
    }, 1000);

}).mouseleave(function () {
    if (timer) {
        clearTimeout(timer);
    }
    $("div.imgzoom").fadeOut().remove();
})

Answer 3

$(".products_grid li").on({
    mouseenter: function () {
        var self = this;
        $(this).data('timer', 
            setTimeout(function() {
                var activeImage = $(self).find("img").attr("src"),
                    imgZoom     = $('<div />', {'class':'imgzoom'}),
                    img         = $('<img />', {src:activeImage});

                imgZoom.hide().append(img).appendTo(self).fadeIn();
            }, 1000)
        );
    },
    mouseleave: function () {
        clearTimeout($(this).data('timer'));
        $("div.imgzoom").fadeOut(function() {
            $(this).remove();
        });
    }
});