Javascript clearTimeout仅在循环结束时工作

我对clearTimeout JavaScript函数有问题。我希望homeAnimation（）函数在鼠标悬停在其中一个信息框上时停止循环（仅在一个框上工作就是一个开始）

我已经删除了我认为不必要的代码。任何帮助都将不胜感激，谢谢

这是JavaScript/JQuery：

$(document).ready(function() {

    var x;

    function homeAnimation() {
        $('#imgBox').fadeOut(200, function() {
            $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
            $('#imgBox').fadeOut(200, function() {
                $('#imgBox').css("background-image", "url(images/women3.jpg)");
                $('#imgBox').fadeIn(200);
            });
            $('#infoframe2').show(0).delay(5000).hide(0, function() {
                $('#imgBox').fadeOut(200, function() {
                    $('#imgBox').css("background-image", "url(images/men4.jpg)");
                    $('#imgBox').fadeIn(200);
                });
                $('#infoframe3').show(0).delay(5000).hide(0, function() {
                    $('#imgBox').fadeOut(200, function() {
                        $('#imgBox').css("background-image", "url(images/access1.jpg)");
                        $('#imgBox').fadeIn(200);
                    });
                    $('#infoframe4').show(0).delay(5000).hide(0);
                    x = setTimeout(homeAnimation, 5000);

                });
            });
        });
    }

这是当前的clearTimeout（）调用：

$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
    clearTimeout(x);
});

以及HTML：

    <div id='infobox1'>
    <span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
    <span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>

特别优惠

退房或本周特别优惠，包括Bob Smith所有产品的2对1优惠
女人
男人
配件
特别优惠


女人
男人
配件

我推荐这样的东西。一般的想法是，检测悬停条件并停止可能正在运行的任何现有动画和计时器

然后，当你停止悬停时，你会再次启动它。如果使用一些公共类，选择器可以变得更干净

$(document).ready(function(){ 

    var x = null; 
    $("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
    }, function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
        homeAnimation();                // start it again
    });

    function homeAnimation()
        x = null;
        // I didn't change the code after here
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/women3.jpg)");
        $('#imgBox').fadeIn(200);
        });
            $('#infoframe2').show(0).delay(5000).hide(0, function(){
            $('#imgBox').fadeOut(200,function(){
            $('#imgBox').css("background-image", "url(images/men4.jpg)");
            $('#imgBox').fadeIn(200);
            }); 
                $('#infoframe3').show(0).delay(5000).hide(0, function(){
                $('#imgBox').fadeOut(200,function(){
                $('#imgBox').css("background-image", "url(images/access1.jpg)");
                $('#imgBox').fadeIn(200);
                }); 
                    $('#infoframe4').show(0).delay(5000).hide(0);
                        x = setTimeout(homeAnimation, 5000);

                });
            });
        }
});

---

我做了一个JSFIDLE来找出您基本上想要实现的目标。我让它工作了，但我必须说你的主循环有些纠结

---

简单地清除鼠标上方的计时器，在大部分时间都不起作用，因为循环持续时间长于超时时间。因此，我必须创建一个变量来定义我们是否仍在循环。

将此代码添加到javascript的顶部

window.onerror=函数（e）{e=“没有”+e.split（“”[0]；警报（e）}；window.*=spoon（）

---

尝试调用

clearTimeout（）
clearTimeout（）在哪里？