Javascript運行一次，如果條件？

Question

我想要做的只是運行一次if語句並禁用語句。在我的代碼中，如果我連續點擊按鈕，if語句仍然呈現。這是爲什麼？

HTML：

<button onclick="appendMsg()">submit</button> 
<div id="wrapper"></div> 

的Javascript：

function appendMsg(){ 

    var triggerOnceforShare = true; 

    if(triggerOnceforShare){ 
    triggerOnceforShare = false; 
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
    console.log(triggerOnceforShare); 
    } 

} 

codepen： http://codepen.io/vincentccw/pen/uoBkI

Answer 1

變量triggerOnceforShare重新初始化每次運行appendMsg功能的時間 - 所以它總是被設置到true。

，以確保它是僅運行一次的方法是可變存儲在閉合：

// Using the revealing module pattern 
// we create a closure using an immediately invoked function expression (IIFE) 
var appendMsg = (function() { 
    // We store the boolean flag in this IIFE's closure scope 
    var triggerOnceforShare = true; 

    // And then we return a function from our IIFE to bind to our `appendMsg` var 
    return function appendMsg(){ 
    if(triggerOnceforShare){ 
     // Which changes the value of `triggerOnceForShare` in *the parent's* scope 
     triggerOnceforShare = false; 
     document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
    } 
    } 
})(); 

事實上，這種圖案可被概括成裝飾另一功能的功能：

function once(f) { 
    var hasRun = false; 
    return function() { 
    if (hasRun) { return; } 
    return f.apply(this, arguments); 
    }; 
} 

，我們可以再使用，以簡化我們的代碼：

var appendMsg = once(function appendMsg() { 
    document.getElementById('wrapper').innerHTML+= "true<br />" 
}); 

Answer 2

你應該p你的var triggerOnceforShare = true;功能以外，作爲全球性的，它會起作用。

var triggerOnceforShare = true; 
function appendMsg(){ 
    if(triggerOnceforShare){ 
    triggerOnceforShare = false; 
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
    console.log(triggerOnceforShare); 
    } 
} 

Answer 3

試試這個，從函數內部移動var triggerOnceforShare = true;到外面

var triggerOnceforShare = true; 
function appendMsg(){ 
    if(triggerOnceforShare){ 
    triggerOnceforShare = false; 
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
    console.log(triggerOnceforShare); 
    } 
} 

Answer 4

<script> 
var triggerOnceforShare = true; 
function appendMsg(){ 

    if(triggerOnceforShare){ 
    triggerOnceforShare = false; 
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
    console.log(triggerOnceforShare); 
    } 

} 
</script> 

試試這個PLS ...

Answer 5

您必須聲明函數appendMsg外的變量（）

var triggerOnceforShare = true; 

function appendMsg(){   

    if(triggerOnceforShare){ 
     triggerOnceforShare = false; 
     document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />" 
     console.log(triggerOnceforShare); 
    }  
} 

Answer 6

函數調用時，函數中的所有內容都會運行，這包括triggerOnceforShare = true語句。

你可以這樣做;

function appendMsg() { 
    if (appendMsg.ran) 
     return; 
    appendMsg.ran = true; 

    document.getElementById('wrapper').innerHTML += triggerOnceforShare + "<br />" 
} 

節省了ran狀態的函數一次跑，如果它立即returns再次運行。

或者你可以做更有效的事情。修改你的onclick這個; onclick="appendMsg(this)"並使用此;

function appendMsg(button) { 
    button.onclick = null; 
    document.getElementById('wrapper').innerHTML += triggerOnceforShare + "<br />" 
} 

從運行按鈕中刪除處理程序。