Javascript - 防止函数多次执行 [英] Javascript - prevent function from executing multiple times

问题描述

我有一个在点击（或taphold）上执行的功能，因为我正在使用Cordova。

I have a function which is executed on a click (or taphold) because I am working with Cordova.

问题是函数调用Parse.com中的下一个对象来显示其详细信息，但由于某种原因，它执行该函数两次甚至3次，跳过必须显示的1或2个对象。

The problem is that a function calls on the next object from Parse.com which shows its details but, for some reason, it executes the function twice or even 3 times, skipping 1 or 2 objects that have to be shown.

我想防止这种情况发生，所以我已经使用了一个标志（布尔值）来指示它是否被执行将其设置为true。如果该标志为false，则可以执行该标志并将该标志设置为true。另一个问题是，当我再次调用该函数时，布尔值仍然设置为true并且函数将不会被执行。

I want to prevent this from happening, so I already used a flag (boolean) to indicate if it was executed by setting it to true. If the flag was false, it can be executed and the flag is set to true. The other problem is that when I call the function one more time, the boolean is still set to true and the function will not be executed.

因此我无法初始化该标志在方法内部为false，因为它将始终执行。全局变量将在第一次设置为true，并在其余部分的生命中保持为真。

Therefore I cannot initialize the flag to false inside the method, because then it will always be executed. Global variable will be set to true the first time and stay true for the rest of it's "life".

我尝试了第二种方法，使用计数器并确保如果计数器到达，让我们说0，它可以被执行，但是当它到达结束时我有同样的问题将它设置回0 ..假设函数执行了两次，我可以检查计数器是否达到2 （通过每次递增）并将其设置为0.然后当下次执行时，它执行3次，所以当检查发生时，如果计数器达到2 ..它将被设置回0并且下一次执行（第3个）将再次执行，因为计数器再次为0。

I tried a second method by using a counter and making sure that if the counter reached, let's say 0, it could be executed, but then I have the same problem for setting it back to 0 when it reaches the end .. Let's say the function got executed twice, I could check if the counter reaches 2 (by incrementing it every time) and set it back to 0. Then when the next time it gets executed, it executes 3 times, so when the check happens if the counter reaches 2 .. it get's set back to 0 and the next execution (the 3rd one) will be executed again because the counter is 0 again.

如何识别或阻止这种情况发生？

How do I catch this or prevent this from happening?

我做了一个基本的Javascript来告诉你我的意思：

I made a basic Javascript to show you what I mean:

window.addEventListener("load",setup,false);
var counter = 0;
function setup() {
   for(var i = 0; i < 3; i++) {
       showAlert();
   }
}

function showAlert() {
   if(counter == 0) {
       alert("Executed once");
       counter++;
   } else if(counter > 2) //counter is bigger than 2, so it got executed more than once {
       counter = 0; //reset the counter to 0
   }          
}

目标是防止该函数执行多次（在这种情况下，警报可能不会多次显示）。它可以执行两次甚至三次，甚至更多次。我该如何防止这种情况？

The goal is to prevent the function from executing more than once (in this case, the alert may not be shown more than once). It could be executed twice or even three times, or even more. How do I prevent this?

谢谢！
我对编程知之甚少，但这是我到目前为止从未遇到的事情，所以我不知道如何抓住这个并确保它执行一次？

Thank you! I do know a bit about programming, but this is something I have never encountered so far, so I do not know how I can catch this and make sure it's executed once?

推荐答案

您正在经历反弹，这是由于短暂连续多次注册多次影响而导致的问题。要绕过它，你需要在你的函数上加一个很短的超时。 （20ms左右）
您可以使用第三方库，例如LoDash，它具有许多有用的实用功能，例如 _。去抖动，或者你可以自己这样做：

You are experiencing "bounce", a problem caused by one impact registering multiple times in short succession. To get around it, you need to put a very short timeout on your function. (20ms or so) You can either use a third-party library such as LoDash which has many useful utility functions such as _.debounce which performs this, or you can do it yourself like this:

var lastClick = 0;
var delay = 20;

function doClick() {
  if (lastClick >= (Date.now() - delay))
    return;
  lastClick = Date.now();

  // do things
  alert("Hello!");
}

<button onclick="doClick()">Push me</button>

这篇关于Javascript - 防止函数多次执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！