Question

好的......我正在制作和增量游戏来测试我的JS技能，我已经面临问题......按钮超时！所以这里有一些关于我的问题的细节：

我有一个div用作按钮，它允许用户“去工作”。我希望按钮在他工作的时候不活动。然后，当他的工作所需的时间得到满足时，玩家将收到钱并且div将重新激活。

我的html div（按钮类是我的css）：

<div class="button" onClick="makeMoney()" id="makeMoney">
<span>Go To Work</span></div>

我的Js功能：

function makeMoney() {
money += job;
document.getElementById("money").innerHTML = money;
};

Answer 1

你可以使用这样的东西吗？

setTimeout(function(){
// Do whatever you want after that time.
),1000); // Wait 1s

感谢。

Answer 2

将setTimeout用于定时事件。此外，您的按钮不是一个真正的按钮，而是一个div。因此，我将保留禁用/启用功能。

function makeMoney() {
    money += job;
    document.getElementById('money').innerHTML = money;

    disableButton();
    setTimeout(enableButton, 1000);
}

function disableButton() {
    // foo
}

function enableButton() {
    // bar
}

Answer 3

我想你想要这样的东西：

function makeMoney() {
    var btn = document.getElementById("makeMoney");

    // If the button is currently disabled, do nothing
    // We can't go to work twice!
    if (btn.getAttribute('disabled') == 'disabled') {
       return;
    }

    // Disable the button immediately
    btn.setAttribute('disabled', 'disabled')

    // Then, after some time...
    setTimeout(function () {
        // Make money and...
        money += job;
        document.getElementById("money").innerHTML = money;

        // Re-enable the button so it can be clicked again
        btn.removeAttribute('disabled')

    }, 1000) // 1 second in milliseconds
};

Answer 4

Html

<button id="testButton" onclick="makeMoney()">Go To Work</button>

的Javascript

function makeMoney()
{
    document.getElementById('testButton').setAttribute('disabled', 'disabled');
    setTimeout(
        function()
        {
            document.getElementById('testButton').removeAttribute('disabled');
        }
        , 3000)
    alert("money made");
}

小提琴 https://jsfiddle.net/jct1uzye/1/

使按钮处于非活动状态一段时间

4 个答案: