注意：

Question

button1的

＆＃13;

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

＆＃13;

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

我实现了一个Ajax调用，在单击按钮时启动转换，完成后将按钮变为红色。只有在服务器响应后，该按钮才会变为红色。

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

我正在考虑实现一个Queue机制，当用户点击一个按钮并以递归方式运行每个调用时，在数组中推送ajax调用。但是我不知道如何动态地执行它，这意味着，如何告诉我的功能：＆＃39;嘿，用户在队列中添加一个新项目＆＃39;请继续。

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

还有其他想法吗？

谢谢！

Answer 1

请回顾一下：

注意：

如果用户单击多个按钮。函数将执行第一个。并在数组（队列）中放入另一个事件。当第一个事件完成时，它将从队列中执行下一个事件。

＆＃13;

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);
})

＆＃13;

button.done {
  color:red;
}

＆＃13;

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

＆＃13;

管理多个异步功能

1 个答案:

注意：