如何防止JS中多次调用function

Question

I am new to JS and I need to execute my function in 1 click and all other clicks after the first are ignored.

 let count = 0; function func() { if (count == 0) { console.log("First Click"); let count = 1; } else { console.log("No first Click"); } }

 <button onclick="func()">Func</button>

(not working)

Answer 1

Remove let keyword

Try this:

<script>
  count = 0;

function func() {
  if (count == 0) {
    alert("first");
    console.log("First Click");
     count = 1;
  } else {
    alert("no first");
    console.log("No first Click");
  }
}
</script>

https://jsbin.com/toroyiropa/edit?html,output

Answer 2

Something like this should work:

<button onclick="func()">Func</button>
<script>
  let count = 0;

  function func() {
    if (count == 0) {
      console.log("First Click");
      count = 1;
    } else {
      console.log("No first Click");
    }
  }
</script>

Explanation: Here count is a global variable you need to change its value once to something different than your comparator ie (count == 0).

Answer 3

I'll suggest you to do something like this:

<button onclick="func()">Func</button>
<script>
   var enabled = true;

   function func() {
      if (enabled) {
         console.log("Do something");
         enabled = false;
      }
   }
</script>

To work with a persistent variable in the context you just need to change the variable from let to var. This solution should work and also might be a little bit cleaner because I think that you probably don't need to use a counter to check if you already perform the function, it's an extra effort.

Answer 4

To have the count variable persist across every function call, the best way is to use closures.

<button onclick="func()">Func</button>

<script>

  var clickTrack = (function() {
    var count = 0;
    return function() {
        if (count == 0) 
            console.log("First Click");
      else
            console.log("No first click");
      count++;
        return;
     }
   })();

  function func() {
        clickTrack();

  }

 </script>