Javascript：如何確保僅在先前事件完成后才觸發onClick事件？

Question

我編寫了在用戶單擊畫布時為畫布上的顏色着色的代碼。 通過淡入淡出動畫為點着色，因此給指定點着色需要花費一定的時間。 如果用戶在仍在着色前一個點的同時單擊新點，則會出現問題：產生異常的顏色，淡入動畫無限期地繼續播放等。

我希望這樣做，以便當用戶單擊某個點時，所有后續單擊都將被忽略，直到為該點着色的功能完成為止。 完成后，用戶應能夠單擊另一個點對其進行着色（即應恢復onClick着色功能）。

在尋找該問題的解決方案時，我主要發現了為僅執行一次的事件而設計的代碼。 但是，這並不是我所需要的。 我的用戶應該能夠觸發任意數量的着色事件-我只是不希望這些事件中的任何一個能夠同時發生。 謝謝你的幫助！

Answer 1

您可以使用鎖定，例如：

var block = false;
element.addEventListener("click", function () {
    if (block === true) {
        return;
    }
    block = true;
    doOperation("params", function () {
        block = false;
    });
});

function doOperation(input, callback) {
    setTimeout(callback, 1000);
}

這會阻止點擊約1秒鍾。

通常，您將使用promise而不是回調：

var block_promise = null;
element.addEventListener("click", function () {
    if (block_promise === null || block_promise.is_resolved() === false) {
        return;
    }
    block_promise = doOperation("params");
});

function doOperation(input, callback) {
    var promise = new Promise();
    setTimeout(function () {
        promise.resolve();
    }, 1000);
    return promise.promise();
}

請注意，JavaScript目前尚未支持Promises。 使用您喜歡的庫。

Answer 2

如果您可以在繪畫時設置標志，可以嘗試一下。 在這里，我將繪畫開始時設置為true，完成時設置為false。 在buttonClick（）函數中，如果繪畫正確，則立即退出。

<!DOCTYPE html>
<html>

<head>
<title>Button Test</title>
</head>

<body>
<script>
var painting = false;
var clicks = 0;

function buttonClick() {

    //if painting, immediately exit buttonClick
    if (painting)
        return;

    //display click count whenever we enter here
    clicks++;
    var obj = document.getElementById("clicks");
    obj.value=clicks;

    //simulate painting
    painting = true;
    document.getElementById("status").innerHTML = "painting in progress";
    setTimeout(function() { colorPoint()}, 10000 /* 10 seconds */ );

}

function colorPoint() {
    //simulated painting
    painting = false; //allows button to be clicked again
    document.getElementById("status").innerHTML = "painting done";
}

</script>

<button onclick="buttonClick()">Click me</button>
Button clicks: <input type="text" name="clicks" id="clicks">
<div id="status"> </div>

</body>
</html>

Javascript：如何確保僅在先前事件完成后才觸發onClick事件？

問題描述

2 個解決方案

解決方案1
1 2014-06-06 21:35:20

解決方案2
0 2014-06-06 21:56:30

Javascript：如何確保僅在先前事件完成后才觸發onClick事件？

問題描述

2 個解決方案

解決方案1 1 2014-06-06 21:35:20

解決方案2 0 2014-06-06 21:56:30

解決方案1
1 2014-06-06 21:35:20

解決方案2
0 2014-06-06 21:56:30