如何在一个功能完成之前禁用按钮被点击的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'); 
    } 
    } 
}; 
})();