只运行一次 JavaScript 函数

Question

When a button is clicked, I'm displaying an image (in a JS function) however the function prints the image every time the button is clicked. I want the function to run only once so that the image can only be displayed once. What do I need to add to my code to do this?

<button class="colour-btn colour-btn--3" onClick="showImage3()"></button>

function showImage3() {
    var img3 = document.createElement('img')
    img3.setAttribute("src", "")
    img3.setAttribute("width", "700")
    img3.setAttribute("height", "400")
    document.body.appendChild(img3)
}

Answer 1

You can use Element.addEventListener with the option once set to true .

According to MDN, the option once is:

A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

<button class="colour-btn colour-btn--3"></button>
<script>
document.querySelector('button').addEventListener('click', showImage3, {once: true});
</script>

 function showImage3() { console.log("showImage3(); only called once"); var img3 = document.createElement('img'); img3.setAttribute("src", ""); img3.setAttribute("width", "700"); img3.setAttribute("height", "400"); document.body.appendChild(img3); } document.querySelector('button').addEventListener('click', showImage3, {once: true});

 <button class="colour-btn colour-btn--3">Show Image 3</button>

You can also use this utility once function that returns a function encapsulating the function passed in as its parameter and will only run it at most once.

function once(fn, context){
    if(typeof fn != "function") throw TypeError("fn is not a function");
    var ran = false, res;
    return function(){
        return ran ? res : (ran = true, res = fn.apply(context||this, Array.prototype.slice.call(arguments)));
    };
}

 function once(fn, context){ if(typeof fn != "function") throw TypeError("fn is not a function"); var ran = false, res; return function(){ return ran ? res : (ran = true, res = fn.apply(context||this, Array.prototype.slice.call(arguments))); }; } function showImage3() { console.log("showImage3(); only called once"); var img3 = document.createElement('img'); img3.setAttribute("src", ""); img3.setAttribute("width", "700"); img3.setAttribute("height", "400"); document.body.appendChild(img3); } var showImage3Once = once(showImage3);

 <button class="colour-btn colour-btn--3" onClick="showImage3Once();">Show Image 3</button>

Answer 2

var imageAdded = false

function showImage3() {
  if (!imageAdded) {
    var img3 = document.createElement('img')
    img3.setAttribute("src", "")
    img3.setAttribute("width", "700")
    img3.setAttribute("height", "400")
    document.body.appendChild(img3)
    imageAdded = true
  }
}

Should do it, presuming you don't mind using a global variable in your code. It's not best practice, but it is the simplest way to solve this quickly.

Answer 3

You can redefine the function once it is run the first time so it only runs once.

function showImage3() {
    showImage3 = function() {};
    var img3 = document.createElement('img')
    img3.setAttribute("src", "")
    img3.setAttribute("width", "700")
    img3.setAttribute("height", "400")
    document.body.appendChild(img3)
}