從另一個函數onclick button2停止遞歸函數調用onclick button1

Question

我試圖通過單擊“ stop_button”時調用另一個函數來確定如何停止從單擊“ start_button”而來的遞歸函數調用。

• 用戶單擊“開始按鈕”，向下/向上滑動動畫繼續“無限”循環，直到...
• 用戶單擊“ stop_button”，循環的動畫將停止。

我想保留兩個不同的按鈕，而不要使用一個雙重用途的“開始/停止”按鈕。 使用下面的代碼，動畫將開始並循環播放，但單擊“停止”按鈕時不會停止。 我想單擊“停止”按鈕來停止動畫。

http://jsfiddle.net/ZdtmZ/

var stopSliding = false;

$('#stop_button').click(function(){
        stopSliding = true;
});

$('#start_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000);    
        infiniteLoop();
        return;
    }
});

Answer 1

您正在同步調用infiniteLoop，這意味着其他任何Javascript都無法執行，例如停止按鈕的單擊處理程序。 您需要使調用異步，以便點擊處理程序可以執行。 您可以使用setTimeout(infiniteLoop, 0); 這樣做，但是您仍然不會得到想要的行為，因為在調用infiniteLoop之前，您還沒有等待滑塊向上滑動。 因此，您應該將infiniteLoop作為對slideUp的回調傳遞。 這將使其異步，並使其等待動畫完成：

$('#top_message').slideUp(2000, infiniteLoop);

您更新的JSFiddle 。

Answer 2

問題可能是，到您要停止動畫時，仍然有許多動畫在隊列中等待執行（因為您的代碼比實際動畫運行得快得多）。 通過提供stop函數的可選參數clearQueue ，可以刪除所有等待的動畫：

$('#top_message').stop(true)

Answer 3

我會這樣寫：

$('#start_button').click( function() {
    if ( stopSliding ) return false;
    $('#top_message').hide().slideDown(2000, function() {
          $('#top_message').slideUp(2000, $('#start_button').click);
    });
    return false;
});

$('#stop_button').click( function() {
    stopSliding = true;
    $('#top_message').stop();
});

Answer 4

我只是做了復位stopSliding變量flase這樣，如果你在啟動動畫再次點擊它不會停止動畫。

的jsfiddle

var stopSliding = false;

$('#stop_button').click(function(){
    stopSliding = true;
});

$('#slide_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        stopSliding = false;
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000, infiniteLoop);
        return;
    }
});