如何自动禁用按钮？

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

我相信这段代码可以满足您的需求。

<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 2

这对我有用

<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 3

您设置的timeout表示“1秒后，执行X” 你当前的超时实际上很难遵循，但它以一种非常纠结的方式广泛地做到了这一点：

1. 让counter = 4
2. 等一下。
3. 如果counter != 1，则从计数器中减1，禁用按钮，然后返回 2 。否则继续。
4. 启用按钮。

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

我建议更改你的countdown（）方法如下：

1. 禁用按钮。
2. 让counter = 3
3. 如果counter > 0，请打印“在counter秒内再次点击”，从counter减去1，等待1秒然后返回 2 即可。否则继续。
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;
        }
    }
}

有更好的方法来表达您的代码，但我尽可能地坚持您的代码风格。