防止代码在运行中多次运行

Question

我的代码在运行时工作正常，如果人员只在按钮上单击一次，但是如果他们在按钮上快速点击多个时间，该代码会运行很多次并创建怪异的问题。任何人都知道如何防止这种情况发生？

Answer 1

添加到您的按钮。

onclick="this.disabled=true;" 

例子：

<button onclick="this.disabled=true;">Click</button> 

当您单击该按钮，立即的onclick运行和禁用按钮，以防止更多的点击。

Answer 2

您想要设置<button>/<a>的disabled属性，以防止用户在处理第一个操作时再次触发它。为此，我通常使用一个标志来确定当前是否正在处理该操作。如果该标志已设置，请设置disabled属性。在你的行动中也有一个警戒声明也是一个好主意。由于某些浏览器可能不尊重disabled属性。

控制器/分量：

import Ember from 'ember'; 
import moment from 'moment'; 

export default Ember.Controller.extend({ 
    isLoading: false, 
    actions: { 
     yourAction() { 
      // It's a good idea to use a guard statement here as well. Just incase the browser doesn't respect the `disabled` attribute. 
      if(this.get('isLoading')) { 
       return; 
      } 
      this.set('isLoading', true); 
      // Do your work here. If it's a promise, use `finally` to unset the flag to avoid forever loading on errors. 
      this.set('isLoading', false); 
     } 
    } 
} 

模板：

<button {{action 'yourAction'}} 
     disabled={{isLoading}}> 
    Your Action 
</button> 

使用这种方法，你也可以在你的行动增加一些装载造型为好。也许微调伪元素：

模板：

<button class="{{if isLoading 'loading'}}" 
     {{action 'yourAction'}} 
     disabled={{isLoading}}> 
    Your Action 
</button> 

编辑
作为ykaragol mentioned，如果你想/可以将库添加到您的灰烬应用程序，ember-concurrency将大大简化本地灰烬例子以上。他们有一个指导here，它使用ember-concurrency将上面的示例重构为更易读的示例。

Answer 3

第一种解决方案是通过设置按钮的disabled属性单击后禁用按钮。

虽然设置disabled属性的按钮可以完全解决问题;传播重新启用逻辑代码不好，当一些异步操作正在执行。

此外，当您有其他一些条件禁用按钮时，重新启用按钮可能会更复杂。 （例如，如果表单上的某个字段的值不正确，您可能需要再次禁用该按钮。）

对于这种需求，我们更倾向于使用ember-concurrency插件。它的task结构为大多数情况提供了更易读的代码。