jquery使用多个setTimeouts

Question

我目前正在创建一个包含一些动态内容的网站,这样每当用户将鼠标悬停在标签上时,标签会展开以显示更多信息,然后在特定时间之后标签将再次折叠,除非用户再次悬停在标签上如果超时将重置.我已经开发了代码来为1个标签执行此操作,但我现在要开发它来为多个标签执行此操作.

我遇到的问题是我正在全局定义计时器的变量,因此它可以用于两个事件,但是当我有多个标签时这不起作用.

我想不出如何为多个标签实现这一点,有没有人知道我怎么做到这一点？

这是我到目前为止的代码......

    var timer;


    $('.label').mouseenter(function(){

        clearTimeout(timer);

        $('#' + this.id + ' div').slideDown('slow');

    });


    $('.label').mouseleave(function(){

        var temp = $('#' + this.id + ' div');

        timer = setTimeout(function() { 
            temp.stop().slideUp('slow');
        }, 2000);

    }); 

在此先感谢您的帮助.

Answer 1

你可以维护一组定时器

var timer = [];


$('.label').mouseenter(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

});


$('.label').mouseleave(function(){

    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

}); 

您也可以使用.hover类似的更清晰的语法来实现这一点

var timer = [];

$('.label').hover(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

},function(){
    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

});