Javascript 防止函数运行两次

我有一个自动运行的幻灯片，你可以通过点击按钮跳转到图像

如果在图像静止时单击其中一个按钮，效果会很好，但如果在淡入淡出功能运行时单击，则会运行两次功能，从而创建某种循环，最终使浏览器处于静止状态

我知道我需要添加某种“正在运行”标志，但我不知道在哪里

这里有一个指向JSFIDLE的链接-

下面还有代码

javascript:

$(document).ready(function() {

var images=new Array();
var locationToRevealCount=6;
var nextimage=2;
var t;
var doubleclick;

addIcons();

function addIcons() {
    while (locationToRevealCount>0) {
        $("#extraImageButtons").append('<img class="galleryButtons" src="http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png" alt="'+locationToRevealCount+'" />');
        images[locationToRevealCount]='http://www.tombrennand.net/'+locationToRevealCount+'a.jpg';
        locationToRevealCount--;
    };
    $('.homeLeadContent').prepend('<img class="backgroundImage" src="http://www.tombrennand.net/1a.jpg" />');
    $("#extraImageButtons img.galleryButtons[alt*='1']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    runSlides();
}

function runSlides() {
    clearTimeout(t);
    t = setTimeout(doSlideshow,3000);
}

function doSlideshow() {
    if($('.backgroundImage').length!=0)
        $('.backgroundImage').fadeOut(500,function() {
            $('.backgroundImage').remove();
            slideshowFadeIn();
        });
    else
        slideshowFadeIn();
}

function slideshowFadeIn() {
    if(nextimage>=images.length) 
        nextimage=1;

    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $("#extraImageButtons img.galleryButtons[alt*='"+nextimage+"']").attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");

    $('.homeLeadContent').prepend($('<img class="backgroundImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
        nextimage++;
        runSlides();

    }));
}

$("#extraImageButtons img.galleryButtons").live('click', function() {
    nextimage=$(this).attr("alt");
    $("#extraImageButtons img.galleryButtons").attr("src","http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
    $(this).attr("src","http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
    clearTimeout(t);
    doSlideshow();
});
});

$（文档）.ready（函数（）{
var images=新数组（）；
var locationToRevealCount=6；
var nextimage=2；
变量t；
var双击；
addIcons（）；
函数addIcons（）{
while（locationToRevealCount>0）{
$（“#extraImageButtons”）。附加（“”）；
图像[locationToRevealCount]='http://www.tombrennand.net/“+locationToRevealCount+'a.jpg'；
位置到重新计数--；
};
$（'.homeLeadContent'）。前置（''）；
$（#extraImageButtons img.galleryButtons[alt*='1']）attr（“src”http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
runSlides（）；
}
函数runSlides（）{
清除超时（t）；
t=设置超时（doSlideshow，3000）；
}
函数doSlideshow（）{
如果（$（'.backgroundImage'）。长度！=0）
$（'.backgroundImage'）.fadeOut（500，function（）{
$（'.backgroundImage'）.remove（）；
slideshowFadeIn（）；
});
其他的
slideshowFadeIn（）；
}
函数slideshowFadeIn（）{
if（nextimage>=images.length）
下一代=1；
$（“#extraImageButtons img.galleryButtons”）.attr（“src”，”http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
$（“#extraImageButtons img.galleryButtons[alt*=”+nextimage+“]”）.attr（“src”，”http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
$（'.homeLeadContent'）。前置（$（''）.fadeIn（500，函数（）{
nextimage++；
runSlides（）；
}));
}
$（“#extraImageButtons img.galleryButtons”）.live（'单击'，函数（））{
nextimage=$（this.attr（“alt”）；
$（“#extraImageButtons img.galleryButtons”）.attr（“src”，”http://www.steveszone.co.uk/images/button_sets/pink_square_button1n.png");
$（this）.attr（“src”http://www.steveszone.co.uk/images/button_sets/black_square_button1n.png");
清除超时（t）；
doSlideshow（）；
});
});

html:

---

两项更改使它对我更有效：

在“extra image buttons”处理程序中，调用“clearInterval（）”，但应将其更改为“clearTimeout（）”

在设置另一个超时之前，我在“runSlides（）”函数中添加了另一个对“clearTimeout（t）”的调用

点击大的“点击我”按钮可能仍然会做一些奇怪的事情

---

编辑-嗯，我认为它做了正确的事情。除了正确调用“clearTimeout（）”之外，我还更改了“doSlideshow（）”中的代码，以便在添加另一个图像之前清空内容。

您希望该图像看起来像什么？您的代码总是在容器中预先添加更多图像；这就是你想要的吗？看看JSFIDLE。。。这正是我想要它看起来的样子。这些改变没有任何区别——除非我弄错了。实际上，click me并不存在，我只是没有添加代码以在单击时删除它。在“clearTimeout（）”的返回值上调用“clearInterval（）”是错误的。我会再次更新提琴并将其分叉。@Tom我已经更新了我的答案，其中有一个链接指向一个效果更好的提琴。我喜欢它！我发现其中有一个bug，很容易修复。如果双击其中一个图标，它会将您带到该图像，然后在幻灯片继续播放时跳过一个位置。如果你点击三次，它会跳过2…@Tom嗯，这可能是因为正在进行的递增/递减。这有点令人困惑；也许值得深吸一口气，从头开始重新构建代码，因为实际上没有太多的工作要做。

<div class="homeLeadContent" style="width:965px;">

</div>
<div id="extraImageButtons"></div>