如何使按钮自动禁用？

Question

我试图编写一个按钮 - 每次你点击它，它会禁用3秒...但由于某种原因，它等待一秒钟然后禁用它。你将如何使它自动禁用？这是我的一些代码到目前为止：

function countdown() { 

    setTimeout(function() { 
     document.getElementById('btnOne').disabled = null; 
    }, 4000); 

    var countdownNum = 4 
    incTimer(); 

    function incTimer() { 
     setTimeout(function() { 
      if (countdownNum != 1) { 
       countdownNum--; 
       document.getElementById('timeLeft').innerHTML = 'Click again in ' + countdownNum; 
       incTimer(); 
       document.getElementById('btnOne').disabled = true; 
      } else { 
       document.getElementById('timeLeft').innerHTML = ''; 
       document.getElementById('btnOne').disabled = false; 
      } 
     }, 1000); 
    } 
} 

Answer 1

这对我的作品

<span id="timeLeft"></span> 
<input type="submit" id="btnOne" onClick="countdown()"> 


function countdown() { 
    document.getElementById('btnOne').disabled = true; 

    var countdownNum = 3 
    document.getElementById('timeLeft').innerHTML = 'Click again in ' + countdownNum; 
    incTimer(); 

    function incTimer() { 
     setTimeout(function() { 
      if (countdownNum != 1) { 
       countdownNum--; 
       document.getElementById('timeLeft').innerHTML = 'Click again in ' + countdownNum; 
       incTimer(); 
       document.getElementById('btnOne').disabled = true; 
      } else { 
       document.getElementById('timeLeft').innerHTML = ''; 
       document.getElementById('btnOne').disabled = false; 
      } 
     }, 1000); 
    } 
} 

Answer 2

我相信这段代码可以处理您需要的东西。

<script type="text/javascript"> 
function fclick(){ 
    document.getElementById('myButton').disabled = true; 
    setTimeout('countDown(3);', 1000); 
} 

function countDown(i){ 
    if (i >= 0) 
    { 
     document.getElementById('myButton').value = 'Click again in ' + i + ' secs'; 
     i--; 
     setTimeout('countDown('+i+');', 1000); 
    } 
    else 
    { 
     document.getElementById('myButton').value = 'Click me'; 
     document.getElementById('myButton').disabled = false; 
    } 
} 
</script> 

<input type="button" value="Click me" id="myButton" onclick="fclick()"> 

Answer 3

您设置timeout，上面写着 “1秒后，做X”。
您当前的超时实际上是非常难走，但它确实大致在这个很纠结方式：

1. 让counter = 4
2. 等待1秒。
3. 如果counter != 1，从计数器减1，禁用按钮，并返回到。否则继续。
4. 启用按钮。

正如您所看到的，您正在等待1秒后禁用按钮，而不是立即。

我建议改变你的倒计时（）方法如下：

1. 禁用按钮。
2. 让counter = 3
3. 如果counter > 0，打印 “在counter秒再次点击” 扣1从counter，等待1秒并回到。否则继续。
4. 启用按钮。

这可能是这样的：（用你的代码）
--- Working Example Here!!! ---

function countdown() { 
    document.getElementById('btnOne').disabled = true; 
    //3 is more understandable than 4 for your example. 
    var countdownNum = 3; 

    incTimer(); 

    function incTimer() { 
     if (countdownNum > 0) { 
      // Order of statements IS important. 
      // Note the differences in this IF block. 
      document.getElementById('timeLeft').innerHTML = 'Click again in ' + countdownNum; 
      countdownNum--; 
      setTimeout(function(){ 
      // Note that the whole timeout was moved inside, 
      // Imagine this is recursive function, with a delay. 
      incTimer(); 
      }, 1000); 
     } else { 
      document.getElementById('timeLeft').innerHTML = ''; 
      document.getElementById('btnOne').disabled = false; 
     } 
    } 
} 

有更好的方法来表达你的代码，但我想尽可能多地坚持你的代码样式。