Función que solo se puede llamar una vez en JavaScript

Aquí el trabajo es aplicar restricciones para que una función no pueda ser llamada más de una vez. El usuario podrá realizar la operación de la función una sola vez. Vamos a hacer eso con la ayuda de JavaScript. 

Enfoque 1:

  • Haz una función.
  • Cree una variable local y establezca su valor en falso. Entonces la función solo puede operar si su valor es falso.
  • Cuando se llama a la función por primera vez, establezca el valor de la variable en verdadero y realice la operación.
  • La próxima vez, debido a que el valor de la variable es verdadero, la función no funcionará.

Ejemplo: Este ejemplo utiliza el enfoque discutido anteriormente. 

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>
        JavaScript | Function that can be called only once.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </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>

Producción:

 

Enfoque 2:

  • Haz una función.
  • Cree una variable estática y establezca su valor en falso. Entonces la función solo puede operar si su valor es falso.
  • Cuando se llama a la función por primera vez, establezca el valor de la variable en verdadero y realice la operación.
  • La próxima vez, debido a que el valor de la variable es verdadero, la función no funcionará.

Ejemplo: Este ejemplo utiliza el enfoque discutido anteriormente (variable estática). 

HTML

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript Function that can be called only once.
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </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>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *