Skip to content
Related Articles

Related Articles

Function that can be called only once in JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 14 May, 2022

Here the job is to apply restrictions so that a function can not be called more than one time. The user will be able to perform the operation of the function only once. We are going to do that with the help of JavaScript. 

Approach 1:

  • Make a function.
  • Create a local variable and set its value to false. So the function can only operate if its value is false.
  • When the function is called the first time, set the variable’s value to true and perform the operation.
  • Next time, because of variable’s value is true function will not operate.

Example: This example uses the approach discussed above. 

HTML




<!DOCTYPE HTML>
<html>
<head>
    <title>
        JavaScript | Function that can be called only once.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>
  
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="font-size: 24px; 
            font-weight: bold; color: green;">
    </p>
  
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to see the result.";
        var fun1 = (function () {
            var done = false;
            return function () {
                if (!done) {
                    done = true;
                    var txt = el_down.innerHTML;
                    el_down.innerHTML = txt 
                      + "From the function.<br>";
                }
            };
        })();
        function GFG_Fun() {
            fun1();  // It is called and result 
            fun1();  // It is not called.
        
    </script>
</body>
</html>


Output:

 

Approach 2:

  • Make a function.
  • Create a static variable and set its value to false. So the function can only operate if its value is false.
  • When the function is called the first time, set the variable’s value to true and perform the operation.
  • Next time, because of variable’s value is true function will not operate.

Example: This example uses the approach discussed above(static variable). 

HTML




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript Function that can be called only once.
    </title>
  
    <script src=
    </script>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
  
    <p id="GFG_UP" style=
        "font-size: 15px; font-weight: bold;">
    </p>
  
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style=
        "font-size: 24px; font-weight: bold; 
        color: green;">
    </p>
  
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var done = false;
  
        el_up.innerHTML = 
            "Click on the button to see the result.";
  
        var fun1 = (function () {
            return function () {
                if (!done) {
                    done = true;
                    var txt = el_down.innerHTML;
  
                    // Appending the text, each time
                    // this function is called.
                    el_down.innerHTML = txt 
                        + "From the function.<br>";
                }
            };
        })();
        function GFG_Fun() {
            fun1();  // It is called and result 
            fun1();  // It is not called.
        
    </script>
</body>
  
</html>


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!