Question

在http://jsfiddle.net/builtbymay/Wge4n/4/，将鼠标悬停在Basecamp号召性用语按钮上，然后将鼠标移到浏览器窗口的左侧。你会注意到标题在延迟1000ms后会改变。太好了！现在再次将鼠标悬停在它上面，但这次将鼠标移到Highrise上。不太好！

我想我需要加快鼠标悬停在Basecamp按钮上时发生的延迟。 clearTimeout对我不起作用。任何帮助，将不胜感激。谢谢！

$(document).ready(function() {
    var delay = 1000;
    $('.products .bc').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.bc:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        // Added bc:first to prevent styles being added to other .bc classes.
        $('.bc:first h1, .bc:first p').css('padding', '18px 0 0');
        // Adjusting vertical layout so red arrow more closely matches location on 37signals.com.  
        $('.bc:last').css('box-shadow', '0 0 10px #333');
    });
    $('.products .bc').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.bc:first').addClass('hidden').removeAttr('style');
            $('.bc:last').removeAttr('style');
        }, delay);
    });
    $('.products .hr').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.hr:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        $('.hr:first h1, .hr:first p').css('padding', '18px 0 0');
        $('.hr:last').css('box-shadow', '0 0 10px #333');
        $('.right-arrow-b').removeClass('right-arrow-b').css({
            'left': '80px',
            'position': 'relative',
            'z-index': '1'
        });
    });
    $('.products .hr').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.hr:first').addClass('hidden').removeAttr('style');
            $('.hr:last').removeAttr('style');
            $('.right-arrow-b').addClass('right-arrow-b').removeAttr('style');
        }, delay);
    });
    $('.products .cf').on('mouseenter', function() {
        $('header').addClass('hidden');
        $('.cf:first').removeClass('hidden').css({
            'clear': 'both',
            'width': '829px',
            'height': '163px',
            'margin': '0 auto',
            'padding': '6px 0',
            'text-align': 'center',
            'font-family': '"CrimsonSemiBold", "Times New Roman", Georgia, serif',
        });
        $('.cf:first h1, .cf:first p').css('padding', '18px 0 0');
        $('.cf:last').css('box-shadow', '0 0 10px #333');
        $('.left-arrow').removeClass('left-arrow').css({
            'left': '150px',
            'position': 'relative',
            'z-index': '1'
        });
    });
    $('.products .cf').on('mouseleave', function() {
        setTimeout(function() {
            $('header').removeClass('hidden');
            $('.cf:first').addClass('hidden').removeAttr('style');
            $('.cf:last').removeAttr('style');
            $('.left-arrow').addClass('left-arrow').removeAttr('style');
        }, delay);
    });
});

仅供参考：CSS和HTML是从另一位同学那里借来的。我的任务是让行为反映在37signals.com上，而不需要在此过程中编辑任何HTML和CSS。有很多css操作发生 - 只是忽略它。我的最后一项任务是解决上述问题。谢谢！

Answer 1

定义一个包含计时器的全局变量

var globalTimer = null;

在$(document).ready(function() ...之上，重要的是这个var没有在方法中定义。

现在为此var分配超时并检查其设置是否需要在所有方法中清除。

if(gloabalTimer != null) window.clearTimeout(gloabalTimer);
globalTimer = window.setTimeout(function() {
    //Your actions
}), delay);

Answer 2

试试这个fiddle。我创建了一个单独的函数来执行mouseleave事件的功能。在mouseenter的一个按钮上执行其他2个按钮的mouseleave功能。另外，我保留了setTimeout的ID数组。在前面提到的功能中，我也清除了所有的定时器。

当mouseenter在另一个函数上时如何完成setTimeout函数？

2 个答案: