предотвратить запуск функции дважды

Question

У меня есть слайд-шоу, которое запускается автоматически, и вы можете перейти к изображению, нажав на кнопку.

Работает нормально, если вы нажмете одну из кнопок, когда изображение статично, но если вы нажмете во время выполнения функций затухания, он запустит функции дважды, что создаст некую петлю, которая в конечном итоге приводит браузер к неподвижности !

Я знаю, что мне нужно добавить какой-нибудь флаг isRunning, но я не знаю, где.

Вот ссылка на jsfiddle - http://jsfiddle.net/N6F55/8/

И код также ниже ...

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

HTML:

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

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

Answer 1

Два изменения заставляют его работать лучше для меня:

1. Вниз в обработчике «дополнительных кнопок изображения» вы вызываете «clearInterval ()», но это должно быть изменено на «clearTimeout ()».
2. Я добавил еще один вызов «clearTimeout (t)» в функции «runSlides ()» непосредственно перед установкой другого тайм-аута.

Нажатие на большой «CLICK ME»Кнопка может все еще делать странные вещи.

edit - ну вот мой форк оригинального jsfiddle , и я думаю, делает все правильно.Помимо правильного вызова метода clearTimeout (), я также изменил код в doSlideshow (), чтобы он очищал содержимое <div> перед добавлением другого изображения.