运行JS函数一次

Question

我有这个JS功能：

<script type="text/javascript"> 
        var counter = <?php echo $oak; ?>; 
        function myFunction() { 
         counter++; 
         document.getElementById('countervalue').innerHTML = counter; 
        } 
       </script> 

该功能一旦触发点击图像上。我的问题是，我希望它只在第一次按下图像时触发。有任何想法吗？提前致谢。

的html代码：

<div class="cut_oak_tree"> 
      <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC --> 
      <br> 
      <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC --> 
      <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC --> 
     </div> 

Answer 1

尝试this code：

对事件调用（onclick="myFunction(this)"），那么你的函数将看起来像function myFunction(img) {添加this。然后它里面删除其click处理程序：

img.onclick = null; 

最后的结果是：

function myFunction(img) { 
    counter++; 
    document.getElementById('countervalue').innerHTML = counter; 
    img.onclick = null; 
} 

而一个形象的例子：

<img src="http://www.pbpixels.com/x/images/oak.png " onclick="myFunction(this)" /> 

我不会用一个boolean像@SLoW建议，因为这样你将无法知道哪个图像已被点击。要做到这一点，你必须使用一个对象，并存储每个图像id - 或类似的东西 - 和它的clicked状态。

Answer 2

我想创建一个名为isClicked变量，在加载页面时，将其设置为false，然后将其设置为true点击图像时。然后在增加计数器之前编写if声明以确保isClicked为false。

<script type="text/javascript"> 
     var counter = <?php echo $oak; ?>; 
     var isClicked = false; 
     function myFunction() { 
      if (isClicked === false){ 
       isClicked = true; 
       counter++; 
      } 
     document.getElementById('countervalue').innerHTML = counter; 
    } 
</script> 

Answer 3

添加标记

function myFunction() { 
    if(!myFunction.invoked){ 
     counter++; 
     document.getElementById('countervalue').innerHTML = counter; 

     myFunction.invoked = true; 
    } 
} 

myFunction.invoked = false; 

Answer 4

删除onclick句柄，通过向您点击的功能元素：

<img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML); myFunction(this)" /> 

function myFunction(elm) { 
    elm.onclick = null; // Remove the onclick 
    counter++; 
    document.getElementById('countervalue').innerHTML = counter; 
} 

Answer 5

，如果你有兴趣在一个jQuery方法，您可以使用。一（）！ http://api.jquery.com/one/

var counter = <?php echo $oak;?> 

    $(".cut_oak_tree img").one("click",function(){ 
      counter++; 
      $("#countervalue").text(counter); 
    }); 

Answer 6

// the wrapper that allows to call the inner function only once 
function once(inner) { 
    var executed = false; 
    return function (args) { 
     if (executed === false) { 
      executed = true; 
      inner.apply(this, arguments); 
     } 
    } 
} 

// a test function that should only be called once 
var inner1 = function (name, age) { 
    window.alert("1 " + name + " -> " + age); 
} 

// another test function 
var inner2 = function (name, age) { 
    window.alert("2 " + name + " -> " + age); 
} 

// testing 
var wrapped1 = once(inner1); 
wrapped1("Tom", 23); 
wrapped1("Tina", 24); 
wrapped1("Toby", 25); 

var wrapped2 = once(inner2); 
wrapped2("Tom", 23); 
wrapped2("Tina", 24); 
wrapped2("Toby", 25);