如何停止函数在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中多次执行？

回答

相关问题