が複数の非同期機能を管理

Question

ボタン1

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button> 
 
<button>button 4</button>

のは、私は、ページ上に複数のボタンがあるとしましょう。クリックすると、赤色に変わります。この変換にはしばらく時間がかかります（5〜30秒）。

ボタンをクリックしたときに変換を開始するAjax呼び出しを実装しました。完了したらボタンを赤に変えます。サーバーが応答した後でなければ、ボタンは赤色に変わります。

私は一度に1つの変換だけを処理するためのメカニズムを実装しようとしています。つまり、ユーザーが複数のボタンをクリックすると、指定された時間に処理されているAjax呼び出しは1つだけです。

ユーザーがボタンをクリックしてそれぞれを再帰的に実行するときに、配列のajax呼び出しをプッシュするキューメカニズムを実装することを考えていました。しかし、私は動的にそれを行う方法、つまり、私の機能にどのように伝えるのか分かりません。「ユーザーが待ち行列に新しい項目を追加しました」と進んでください。

私はajax呼び出しの配列とajax呼び出しを一度に1回実行する関数を接続する必要があります。私の関数は、配列内で発生しているイベントをリッスンする必要があります。

他のアイデアはありますか？

ありがとうございます！

Answer 1

この1確認してください：ユーザが複数のボタンをクリックした場合

：

は注意を。関数は最初の関数を実行します。別のイベントを配列（キュー）に入れます。 最初のイベントが完了したとき、は次のイベントをキューから実行します

var btns = Array.from(document.getElementsByTagName('button')), 
 
    isProcessing = false, queue = []; 
 

 
function proceed(e){ 
 
    if(isProcessing) { 
 
     queue.push(e.target); 
 
     return; 
 
    } 
 
    //start proccesing 
 
    isProcessing = true; 
 
    var ajax = setTimeout(()=> { 
 
    e.target.classList.add('done'); 
 
    isProcessing = false; 
 
    //processing the queue 
 
    if(queue.length) { 
 
     queue.shift().click(); 
 
    } 
 
    },4000); 
 
} 
 

 
btns.forEach(function(btn){ 
 
    btn.addEventListener('click', proceed); 
 
})

button.done { 
 
    color:red; 
 
}

<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button> 
 
<button>button 4</button>