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();
        });
    }
});

具有计时器的Mouseenter功能

3 个答案: