简体繁体 English

按钮单击和超时在 javascript 中调用相同的函数

[英]Button Click and Timeout calling the same function in javascript

原文 2018-11-12 12:58:40 8 3 javascript/ timeout/ dom-events/ buttonclick

I am working on an ionic project, and as part of this project, the user will have to complete a timed task.我正在做一个离子项目，作为这个项目的一部分，用户必须完成一个定时任务。 They have to answer a multiple choice question in 15~ seconds, otherwise they fail the task.他们必须在 15~ 秒内回答一个多项选择题，否则他们将无法完成任务。

I currently have a timeout in the background, which will call function "evaluate" in the background, and disable the multiple choice answer buttons.我目前在后台有一个超时，它会在后台调用函数“评估”，并禁用多项选择答案按钮。 This function is also called by the click of one of the multiple choice answer buttons.此功能也可通过单击多项选择答案按钮之一来调用。

Is there a danger of an edge case where the user selects the button just as the timeout calls the evaluate function, leading to the function being called twice?是否存在边缘情况的危险，即用户在超时调用评估函数时选择按钮，导致函数被调用两次？ How can I avoid this?我怎样才能避免这种情况？

3 个解决方案

You could have a variable named something like "eval_running" that you check in your evaluate function.您可以有一个名为“eval_running”的变量，您可以在评估函数中检查该变量。 If it is false, you set it to true and proceed evaluating.如果为 false，则将其设置为 true 并继续评估。 If it is true, you return from the function without evaluation.如果为真，则无需求值就从函数返回。 When you display the next task, you reset the variable to false.当您显示下一个任务时，您将变量重置为 false。

That would prevent any kind of race condition.这将防止任何类型的竞争条件。 The time frame in which a double execution could occur depends on how long the eval function is working in the background.可能发生双重执行的时间范围取决于 eval 函数在后台工作的时间。 Chances are, you do not need to worry about this.很有可能，您无需担心这一点。

The best approach in this scenario is not very complicated.这种情况下的最佳方法不是很复杂。 So the timeout trigger and also the submit button are calling the same evaluate function.所以超时触发器和提交按钮正在调用相同的evaluate函数。

All you need to do is this.你需要做的就是这个。 Disable the submit button immediately at the opening of the function and then write whatever you want to do.在函数打开时立即禁用提交按钮，然后写任何你想做的事情。 So if the timeout calls the function first, the button will be disabled before executing the operations, and the user cannot click the button anymore.因此，如果超时先调用该函数，则该按钮将在执行操作之前被禁用，并且用户无法再单击该按钮。 If the button is clicked first, then it goes as it should and there's no complication here.如果首先单击按钮，那么它会按原样进行，这里没有任何复杂性。

As far as I known, there is no way to have a "race condition" in a web browser session, basically because each tab in a web browser runs in a single thread, so your logic will runs in a single runloop.据我所知，在 web 浏览器会话中没有办法有“竞争条件”，基本上是因为 web 浏览器中的每个选项卡都在单个线程中运行，所以您的逻辑将在单个 runloop 中运行。 You can use this fact to implement a flag indicating what happens first, but (honestly) this is pretty ugly.您可以使用这个事实来实现一个标志，指示首先发生什么，但是（老实说）这非常难看。

I think the most elegant solution should be to make the function evaluate idempotent, that way, you don't care if is called several times.我认为最优雅的解决方案应该是使函数evaluate幂等，这样，您就不必关心是否被多次调用。