如何在一個功能完成之前禁用按鈕被點擊的javascript

Question

好吧，所以我有一個沒有任何標識的按鈕，但是當它被點擊時，它會啓動一個名爲buttonClick的函數。此功能基本上控制一臺老虎機（戳機）它的圖像，獎金等。注意，一些代碼可能無法正常工作，但請忽略這一點，並設想它的工作。但是我該如何做到這一點，以便如果用戶在完成此功能之前單擊播放按鈕，它將不會執行任何操作，但仍會完成它已在執行的功能。對不起，沒有我的全長代碼在這裏的不便，但它的一個樣本。

function buttonClick(){ 
var pic = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); 
var ex1 = pic[Math.floor(Math.random()*pic.length]; 
var ex2 = pic[Math.floor(Math.random()*pic.length]; 
var ex3 = pic[Math.floor(Math.random()*pic.length]; 
var moveImg = new Array("1.gif","2.gif","3.gif");  
var timer = new Array("1000","5000","500","2000"); 
var time = Math.floor(Math.random()*4); 
    if (document.getElementById('coins').value > 0){ 
      document.getElementById('coins').value -= 1; 
      pic[0].src = moveImg[0]; 
      pic[1].src = moveImg[1]; 
      pic[2].src = moveImg[2]; 
      setTimeout(function(){ 
       pic[0].src = ex1; 
       pic[1].src = ex2; 
       pic[2].src = ex3; 
      },timer[time]) 
    } 
     else{ 
      alert('Error insufficient tokens'); 
     } 
} 

Answer 1

var in_progress = false; 
function buttonClick(){ 
    if(!in_progress){ 
    var pic = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); 
    var ex1 = pic[Math.floor(Math.random()*pic.length]; 
    var ex2 = pic[Math.floor(Math.random()*pic.length]; 
    var ex3 = pic[Math.floor(Math.random()*pic.length]; 
    var moveImg = new Array("1.gif","2.gif","3.gif");  
    var timer = new Array("1000","5000","500","2000"); 
    var time = Math.floor(Math.random()*4); 
    if (document.getElementById('coins').value > 0){ 
     in_progress = true; 
     document.getElementById('coins').value -= 1; 
     pic[0].src = moveImg[0]; 
     pic[1].src = moveImg[1]; 
     pic[2].src = moveImg[2]; 
     setTimeout(function(){ 
      in_progress = false; 
      pic[0].src = ex1; 
      pic[1].src = ex2; 
      pic[2].src = ex3; 
     },timer[time]) 
    } else { 
     alert('Error insufficient tokens'); 
    } 
    } 
} 

或者你可以用函數在閉包，使in_progress一個私有變量。

var buttonClick = (function(){ 
    var in_progress = false; 
    return function(){ 
    if(!in_progress){ 
    var pic = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); 
    var ex1 = pic[Math.floor(Math.random()*pic.length]; 
    var ex2 = pic[Math.floor(Math.random()*pic.length]; 
    var ex3 = pic[Math.floor(Math.random()*pic.length]; 
    var moveImg = new Array("1.gif","2.gif","3.gif");  
    var timer = new Array("1000","5000","500","2000"); 
    var time = Math.floor(Math.random()*4); 
    if (document.getElementById('coins').value > 0){ 
     in_progress = true; 
     document.getElementById('coins').value -= 1; 
     pic[0].src = moveImg[0]; 
     pic[1].src = moveImg[1]; 
     pic[2].src = moveImg[2]; 
     setTimeout(function(){ 
      in_progress = false; 
      pic[0].src = ex1; 
      pic[1].src = ex2; 
      pic[2].src = ex3; 
     },timer[time]) 
    } else { 
     alert('Error insufficient tokens'); 
    } 
    } 
}; 
})();