一次運行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對事件調用（ 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)" />

我不會使用像@SLoW這樣的boolean因為那樣一來，您將無法知道已經單擊了哪個圖像。 為此，您必須使用一個對象並存儲每個圖像id （或類似的圖像）及其clicked狀態。

Answer 2

添加標志

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

       myFunction.invoked = true;
    }
}

myFunction.invoked = false;

Answer 3

通過將單擊的元素發送到函數中，刪除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 4

如果您對jquery方法感興趣，可以使用.one（）！ http://api.jquery.com/one/

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

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

Answer 5

// 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);

Answer 6

我將創建一個名為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>