Javascript 当鼠标插入另一个函数时，如何完成setTimeout函数？

在，将鼠标悬停在Basecamp call to action按钮上，然后将鼠标移到浏览器窗口的左侧。您会注意到，在延迟1000毫秒后，航向会变回原来的位置。美好的现在再次将鼠标移到它上面，但这次将鼠标移到高楼上。不好

我想我需要加快鼠标在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操作正在发生，请忽略它。我的最后一项任务是解决上述问题。谢谢

定义一个保存计时器的全局变量

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

var globalTimer=null；

在

$（document）.ready（function（）…

）上方，不在方法中定义此变量非常重要

现在将超时分配给这个变量，并检查它是否已设置，以及是否需要在所有方法中清除它

if（gloabatimer！=null）窗口。clearTimeout（gloabatimer）；
globalTimer=window.setTimeout（函数（）{
//你的行为
})，延误）；

试试这个。我制作了一个单独的函数来执行

mouseleave

事件的功能。在一个按钮的

mouseenter

上执行其他两个按钮的

mouseleave

功能。此外，我还保留了一个ID数组

setTimeout

。在前面提到的函数中，我也清除了所有的计时器。

也许我在某个地方遗漏了它，但我在您提供的代码中没有看到clearTimeout（）。

var a=setTimeout（function（）{………

和

clearTimeout（a）

也许clearTimeout不能用我设置函数的方式工作。有什么解决方案吗？我喜欢mouseleave事件的函数是如何分开的。谢谢你的帮助！谢谢你的帮助Merec。我还有很多东西要学。谢谢！