停止setTimeout函數

Question

好了，所以我有一個非常簡單的圖像幻燈片這裏是jsfiddle

因爲你們可以看到它正常工作，當您單擊開始。然而，當您單擊停止功能不斷去這裏是jQuery的：

$(document).ready(function() { 
    var timer; 
    $('img.hidden').hide(); 
    $('img.top').show(); 

    $('input').click(function(){ 
      var value = $('input').attr("value"); 

    if(value == "start"){ 

    $(this).attr("value","stop"); 
    startShow(); 

    }else if(value == "stop"){ 
      $(this).attr("value","start"); 
      alert('stopped'); 
      clearTimeout(timer); 

     } 
    }); 

}); 

function startShow(){ 
    var $top = $('img.top').attr("src"); 
    var $last = $('img').last().attr("src"); 

    if($top != $last){ 

    var $topImg = $('img.top'); 
    var $nextImg = $('img.top').next(); 

    $topImg.hide(); 
    $nextImg.show(); 

    $topImg.removeClass("top"); 
    $nextImg.addClass("top"); 
    } 
    else{ 

    var $topImg = $('img.top'); 
    var $nextImg = $('img').first(); 

    $topImg.hide(); 
    $nextImg.show(); 

    $topImg.removeClass("top"); 
    $nextImg.addClass("top"); 

    } 
    timer = setTimeout(function() { startShow(); }, 2000); 
}; 

Answer 1

的問題是你的變量的作用域。移動var timer;您的文檔準備功能之外，它會工作。當然，這使得它成爲一個全球性的，這是不好的。因此，您可能想將StartShow移動到文檔就緒功能中。

Answer 2

timer被聲明爲$(document).ready函數的局部變量，因此它是不是在startShow功能可用。

的解決方案是讓timer一個全局變量，或者更好的重新組織你的代碼使用關閉。

JS Fiddle Demo

讓我解釋一下這是怎麼回事用一個例子。

function main() { 
    var x = 3; // declare a local copy of x, available only in this function 
    setValueOfX(); // Try to change the value of x (doesn't work) 
    console.log(x); //Prints 3 
} 

function setValueOfX() { 
    x = 12; // You would expect this to change the value of x, but it only changes the value of the global x (window.x), not the local x, so this won't work 
} 
main(); 

Answer 3

startShow被分配全局變量timer，但是當你調用clearTimeout你是哪裏的局部變量timer被宣佈爲document.ready(function() {...})內。該局部變量隱藏全局變量。

要麼擺脫var timer;聲明，要麼在0123函數內移動startShow()。