停止遞歸函數調用onclick button1從不同的函數onclick按鈕2

Question

我想確定如何通過調用'stop_button'時單擊一個不同的函數來阻止來自點擊'start_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); 

你updated 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; 
    } 
});