如何限制一个函数运行5次？ Javascript答案

【问题标题】：How to limit a function to run 5 times? Javascript如何限制一个函数运行5次？ Javascript
【发布时间】：2023-02-04 18:39:47
【问题描述】：

我试图限制一个函数只运行 5 次但没有成功。所以这个练习的想法是创建一个函数 Person() 来询问一个人的 [name, surname and age] 并询问用户信息 5 次。我的问题是限制功能，目前我可以添加任意数量的用户，而不仅仅是 5 个。

<body>
    <div class="container">
        <div class="form-box">
            <h1 id="title">Exercise</h1>
            <form>
                <div class="input-group" id="name-field">
                    
                        <input type="text" placeholder="Nome" class='firstName' id="firstName-input">
                    
                   
                        <input type="text" placeholder="Apelido" class="lastName" id="lastName-input">
                    
                    
                        <input type="text" placeholder="Idade" class="age" id="age-input">
                    
                    <div class="btn-field">
                    <button type="button" class="btn-adicionar" id="btn-adicionar" onclick="Person()">Add</button>
                    <button type="button" class="btn-mostrar" id="btn-mostrar" onclick="Show()">Show</button>
                    </div>
                    <p id="p"></p>
                </div>
            </form>
        </div>
    </div>

let Persona = [];
Persona.values = {
    inputs: [],
    labels: {
        n: ' Name: ',
        a: ' Surname: ',
        i: ' Age: ',
    },
};

    function Adicionar() {
        
    
            let firstName = document.getElementById('firstName-input').value;
            let lastName = document.getElementById('lastName-input').value;
            let age = document.getElementById('age-input').value;

            Persona.values.inputs.push({
                firstName: firstName,
                lastName: lastName,
                age: age,
            });
        
        
    }

    function Show() {
        let text = '';
            
            
                for (var i = 0; i < Persona.values.inputs.length; i++) {
        
                    text += "<div class='outrow'>";

                    text += "<span class='lab'>" + Persona.values.labels.n + '</span>';
                    text +=
                        "<span class='outv'>" +
                        Persona.values.inputs[i].firstName +
                        '</span>';
                    text += "<span class='lab'>" + Persona.values.labels.a + '</span>';
                    text +=
                        "<span class='outv'>" +
                        Persona.values.inputs[i].lastName +
                        '</span>';
                    text += "<span class='lab'>" + Persona.values.labels.i + '</span>';
                    text +=
                        "<span class='outv'>" + Persona.values.inputs[i].age + '</span>';
                    text += '</div>';
                }
            
        let result = document.getElementById('p');
        result.innerHTML = text;
    }

我试过使用 if 语句，但结果仍然相同。

 function Person() {
        let number = 0
    if (number < 5) {
            let firstName = document.getElementById('firstName-input').value;
            let lastName = document.getElementById('lastName-input').value;
            let age = document.getElementById('age-input').value;

            Persona.values.inputs.push({
                firstName: firstName,
                lastName: lastName,
                age: age,
            });
         number++
        }
        
    }```

【问题讨论】：

使用全局变量而不是局部变量来跟踪它。

标签： javascript function

【解决方案1】：

您可以在函数Person 之外保留一个计数器，并在添加条目之前在函数内部检查它的值。您可以在函数 Person 中添加一个条件，以在计数器达到 5 时停止添加新条目。

将计数器放在函数之外意味着每次调用函数时都不会重置它的值。这样，计数器的值将在函数调用之间保持不变，并且您可以跟踪函数被调用的次数。

如果计数器在函数内部，每次调用函数时，都会创建一个新计数器并将其初始化为 0。这将导致函数总是添加一个新条目，因为计数器永远不会达到 5。

let counter = 0;

function Person() {
    if (counter < 5) {
        let firstName = document.getElementById('firstName-input').value;
        let lastName = document.getElementById('lastName-input').value;
        let age = document.getElementById('age-input').value;

        Persona.values.inputs.push({
            firstName: firstName,
            lastName: lastName,
            age: age,
        });
        counter++;
    }
}

【讨论】：

【解决方案2】：

您在要限制的函数中添加 number 计数器变量，因此每次调用此函数时，number 将重置为零，对以下条件没有影响。您实际上想将您的 number 变量声明为全局变量，这样它就不会重置：

let number = 0 

function Person() {
  if(number < 5) {...}
  number++
}

【讨论】：