阻止功能運行兩次

我有一個幻燈片會自動運行，您可以通過單擊按鈕跳到圖像。阻止功能運行兩次

如果您在圖片爲靜態圖片時單擊其中一個按鈕，但如果您在執行淡入淡出功能時單擊它，它將運行兩次函數，這會創建某種循環，最終將瀏覽器磨成一個支架仍然！

我知道我需要添加某種「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>

來源

2011-03-30 Tom

什麼是你想要的東西看起來像？你的代碼總是在容器中添加更多的圖像;那是你要的嗎？ – Pointy 2011-03-30 13:14:38

看看jsfiddle ......這正是我想要的樣子。 – Tom 2011-03-30 13:25:55

兩個變化使其工作對我更好：

在「額外的圖像按鈕」處理程序中，您調用「clearInterval（）」，但應該更改爲「clearTimeout（）」。
我在「runSlides（）」函數中添加了另一個對「clearTimeout（t）」的調用，然後再設置另一個超時。

點擊大的「CLICK ME」按鈕可能仍然有奇怪的事情。

編輯 —以及here is my fork of the original jsfiddle我認爲它是做正確的事。除了正確調用「clearTimeout（）」之外，我還更改了「doSlideshow（）」中的代碼，以便在添加其他圖像之前清空內容<div>。

來源

2011-03-30 13:19:23 Pointy

這些更改沒有什麼區別 - 除非我弄錯了。點擊我實際上不會在那裏，我只是沒有添加代碼，當它被點擊時刪除它。 – Tom 2011-03-30 13:27:52

對來自「clearTimeout（）」的返回值調用「clearInterval（）」是錯誤的。我會再次更新小提琴和叉子。 – Pointy 2011-03-30 13:30:43

@Tom我已經更新了我的答案，並提供了一個更好的小提琴的鏈接。 – Pointy 2011-03-30 13:43:25

阻止功能運行兩次

回答

相關問題