Запуск функции 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:

Добавить this на вызов события (onclick="myFunction(this)"), то ваша функция будет похожа function myFunction(img) {. Затем внутри него удалить его 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 подходе можно использовать .one (!) 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);