如何停止函數在JavaScript中多次執行？

我是新來的JavaScript和jQuery。我的一個功能是在調用另一個功能時執行它自己。我嘗試了所有可以在此找到的方法來阻止此問題。但是，這個函數在應用時會完全停止執行。我需要它只執行一次。如何停止函數在JavaScript中多次執行？

我試圖填充一個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>

來源

2016-04-29 Arjun Ajith

你能說出你的問題很少清楚，試圖實現的區域 –

'$（「document」）'嘗試用'$（document）替換它'雖然我會surpri sed如果這導致問題 – gurvinder372

定義了哪裏？爲什麼不在'appendTo'中使用'processArray.push'的命名函數？這可能有助於簡化這往往導致解決的事情。 – kwelch

這僅增加了一個項目，列出其中添加，問題是你有在陣列外部聲明陣列，以便每次重複該元素時

<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>

來源

2016-04-29 12:41:06

感謝兄弟。有效。 –

注：在您的具體情況，看看卡菲基恩sundaramoorthi回答

以供將來參考，通用的解決方案：

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

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

來源

2016-04-29 12:43:22 Apolo

謝謝你。我會牢記這一點。 –

如何停止函數在JavaScript中多次執行？

回答

相關問題