Javascript 如何使异步事件处理程序按特定顺序工作？

假设我有一个带有事件处理程序的按钮：

<button onclick="btnClicked()"> CLICK ME </button>

假设我在同一个按钮上点击了两次。我希望在控制台1和控制台2中看到

但是，这不是我要得到的。每次单击按钮都会异步调用函数

btnClicked

，因此可能会出现第二次调用在第一次调用结束之前结束的情况。e、 g.第一次调用调用

btnClicked

，传递行

num++

，然后保持（出于某种原因）。同时，第二次调用进入num=1的函数，将其递增为2，在控制台中打印2，然后第一次调用继续执行num=2，因此也打印2

---

您知道如何确保只有在第一次调用结束后才能进行第二次调用吗？

在按钮上单击，只需禁用按钮，并在函数结束时启用按钮。你能试试这个吗。我认为它会对您有用。

虽然它可能无法直接解决您的问题，但建议您使用它而不是onclick

此外，要使变量成为全局变量，您可以在不使用“var”的情况下对其进行调用——可能不完全是您希望使用“num”这样的泛型变量所做的事情，但这将使其成为全局变量（更多信息）

这将为您提供如下信息：

<button id='click-me'> CLICK ME </button>

<script>
    num = 0; // global variable
    document.getElementById('click-me').addEventListener('click', function(){
        // function here
    });
</script>

点击我
num=0；//全局变量
document.getElementById（'click-me'）。addEventListener（'click'，function（）{
//在这里起作用
});

您只需要承诺解决订单问题。 事件一个接一个地进行着。但是如果您有一个ajax请求，并且需要在收到服务器的响应后逐个发送ajax请求。您可以通过单击按钮发送ajax请求（按特定顺序异步执行函数，每个函数一个接一个）。下面是一个使用伪执行函数的工作示例

var num=0；
var执行=新承诺（函数（解析、拒绝）{
解决（）；
});
var btnHandle=函数（）{
正在执行.then（createjobInstance（））；
}
var createJobInstance=函数（）{
返回函数（）{
返回新承诺（功能（解决、拒绝）{
//从10ms到2000ms的假异步操作，随机执行时间
setTimeout（函数（）{
console.log（num++）；
解决（）；
}，Math.floor（Math.random（）*2000）+10）；
});
};
}
var btn=document.querySelector（“#btn”）；
btn.addEventListener（“单击”，btnHandle）
阅读响应后，单击
，我明白我描述的场景（控制台将打印“2”两次）是不可能的

事件处理程序被添加到事件队列中。事件队列不是V8线程。因此，事件队列中的每个任务都将同步执行，即只有在第一次调用结束后，第二次调用才会启动

但是，如果功能是：

function btnClicked() { 
   num++;
   console.log(num);
   **AJAX call** 
}

那么执行顺序将是：
印刷：1
为第一次调用发送的AJAX调用
打印2
为第二次调用发送的AJAX调用

在这种情况下，两个AJAX调用都发生在不同的线程中，我们无法确定哪一个将首先结束
 
因此，有一种可能的情况是，第二次调用将在第一次调用结束之前结束
-erm，而不是使用该代码JavaScript具有“运行到完成”的概念。即当前正在运行的代码不能被中断。“每次单击按钮都会异步调用函数btnClicked”单击按钮会将处理程序添加到消息队列中。只有当JavaScript引擎不做任何事情时，它才会处理队列中的下一条消息。在这种情况下，谁会中断正在运行的代码？我不确定我是否理解这个问题。无法中断执行。JavaScript是单线程的（至少在浏览器中）。永远只能执行一件事情，而这件事情一直执行到完成。再次，看看我发布的链接。这应该是没有必要的。这些事件是按顺序处理的。@Felix Kling，这些事件不是异步回调？@CrazySynthax:当然是。但是，每当引擎空闲时，每个异步事件都会添加到消息队列并进行处理。请参阅我对您的问题的第一条评论以及我在那里发布的链接。@FelixKling，我发布了我自己问题的答案。你同意吗？
function btnClicked() { 
   num++;
   console.log(num);
   **AJAX call** 
}