運行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);