防止代碼在運行中多次運行

我的代碼在運行時工作正常，如果人員只在按鈕上單擊一次，但是如果他們在按鈕上快速點擊多個時間，該代碼會運行很多次並創建怪異的問題。任何人都知道如何防止這種情況發生？防止代碼在運行中多次運行

2017-06-02 jpoiri

添加到您的按鈕。

onclick="this.disabled=true;"

例子：

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

當您單擊該按鈕，立即的onclick運行和禁用按鈕，以防止更多的點擊。

來源

2017-06-02 19:06:19 Korgrue

您想要設置<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將上面的示例重構爲更易讀的示例。

來源

2017-06-02 20:43:37

第一種解決方案是通過設置按鈕的disabled屬性單擊後禁用按鈕。

雖然設置disabled屬性的按鈕可以完全解決問題;傳播重新啓用邏輯代碼不好，當一些異步操作正在執行。

此外，當您有其他一些條件禁用按鈕時，重新啓用按鈕可能會更復雜。（例如，如果表單上的某個字段的值不正確，您可能需要再次禁用該按鈕。）

對於這種需求，我們更傾向於使用ember-concurrency插件。它的task結構爲大多數情況提供了更易讀的代碼。

來源

2017-06-03 01:08:01 ykaragol

我試着用ember-concurrency，它似乎沒有解決這個問題。基本上我有一個基於計數器的邏輯，當你點擊一個按鈕時，它將計數器增加1，如果你點擊的速度很快，結束它的增量2和它的邏輯混亂，會發生什麼。所以我試圖鎖定這些變量我想，沒有媽媽多少次你點擊它會增加1倍 – jpoiri

然後'禁用'幫助你？如果你提供旋轉，我可以看得更遠。 – ykaragol

不，我是我的第一個解決方案，我仍然能夠重現它 – jpoiri

防止代碼在運行中多次運行

回答

相關問題