Question

我是JS的新手，我需要一键执行我的函数，而第一次之后的所有其他单击都将被忽略。

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>

（不起作用）

Answer 1

删除let关键字

尝试一下：

<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

类似的事情应该起作用：

<div id = "app"> {{message}}
</ div>

说明：这里count是一个全局变量，您需要将其值一次更改为不同于比较器的值，即（count == 0）。

Answer 3

我建议您做这样的事情：

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

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

要在上下文中使用持久变量，只需要将变量从let更改为var。该解决方案应该可以工作，并且可能会更清洁一点，因为我认为您可能不需要使用计数器来检查您是否已经执行了该功能，这是一项额外的工作。

Answer 4

要使count变量在每个函数调用中持续存在，最好的方法是使用闭包。

<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>

如何防止JS中的多功能调用

4 个答案: