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