管理多个异步功能

Question

Button1的

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

比方说，我有一个页面上的多个按钮。当你点击它们时，它们变成红色。这个转换需要一段时间（5-30秒）。

我实现了一个Ajax调用，当点击一个按钮时开始转换，它完成后将该按钮变为红色。只有服务器响应后，该按钮才会变为红色。

我想实现一种机制来确保一次只处理一个转换。也就是说，如果用户单击多个按钮，则在给定时间只有一个正在处理的Ajax调用。

我在考虑实现一个队列机制，当用户点击一个按钮并递归运行每个按钮时，在数组中推送ajax调用。但我不知道如何动态做到这一点，也就是说，如何告诉我的功能：'嘿用户在队列中添加一个新项目'，请继续。

我必须连接我的ajax调用数组和我的函数，每次只执行一次ajax调用。我的函数应该监听数组中发生的任何事件。

还有其他想法吗？

谢谢！

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