Question

我是javascript和jquery的新手。我的一个功能是在调用另一个函数时自行执行。我尝试了我能在这里找到的所有方法来阻止它。但是这个函数在应用它们时会完全停止执行。我需要它只执行一次。

我试图从javascript数组填充列表。第一个功能是为了这个。然后我需要向此数组添加更多项目并使用新数组填充列表。第二个函数addProcessFunc（）就是为了这个。但是在执行第二个函数时，第一个函数中的项再次添加到数组中。我需要停止它。

我的代码如下： -

HTML： -

<div class="container">
    <label id="processError" class="validationError"></label>
    <div class="process">
        <div class="tab-content addProcess">
            <div id="home" class="tab-pane fade in active">
                <div class="addProcessDiv">
                <label>Process Name</label>
                <input type="text" id="processName" name="processName" class="form-control processName" />
                <button type="submit" onclick="addProcessFunc()" class="btn addButton">Add</button>
            <div class="sortList">
                <ul id="appendHere"></ul>                                  
                        <div class="saveBtn">
                            <button type="button" class="btn">Save</button>
                        </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS： -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
    var processArray = [];
    $("document").ready(function(){ //I need this to be executed only once.
            processArray.push({
                id: i,
                processName: Some_Process
            });
            console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
    });
    function addProcessFunc(){
        var name = document.getElementById('processName').value;
        if (name != ""){
            i++
                processArray.push({
                    id: i,
                    processName: Another_Process
                });
                console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
        } else {
            document.getElementById('processError').innerHTML = "Required";
        }
    }
</script>   
<script id="testTemplate" type="text/x-jquery-tmpl">
    <ul id="sortable">
        <li class="ui-state-default">
            <span class="sort drag-handle"></span>
                <label class="sortLabelLeft">${processName}</label>
            <span class="delete"></span>
        </li>
    </ul>
</script>

Answer 1

这只添加一个项目到列表中添加，问题是你已经将数组声明为外部所以每次元素重复时

<script type="text/javascript">
    var i=1;
    $("document").ready(function(){ //I need this to be executed only once.
        var processArray = [];
            Some_Process = 'test';
            processArray.push({
                id: i,
                processName: Some_Process
            });
            console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
    });
    function addProcessFunc(){
        var processArray = [];
        var name = document.getElementById('processName').value;
        if (name != ""){
            i++
                processArray.push({
                    id: i,
                    processName: name
                });
                console.log(processArray);
            $("#testTemplate").tmpl(processArray).appendTo("#appendHere");
        } else {
            document.getElementById('processError').innerHTML = "Required";
        }
    }
</script>

Answer 2

注意：在您的具体情况下，请看看Karthikeyan sundaramoorthi的回答

供将来参考，一般解决方案：

＆＃13;

// you want this function to be executed not more than once
function myFunction() {
  if(!this.done) {
    this.done = true;
    console.log("I'm running");
  }
}

＆＃13;

<button onclick="myFunction()">Click me</button>

＆＃13;

如何在JavaScript中停止多次执行函数？

2 个答案: