代码之家 › 专栏 › 技术社区 › CrazySynthax

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

dom-events event-handling asynchronous javascript

CrazySynthax · 技术社区 · 9 年前

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

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

这是js文件:

var num = 0; // global variable

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

但是,这不是我将得到的。每次点击按钮都会调用该功能 btnClicked BTN已单击 ,通过该行 num++ 然后(出于某种原因)保持不变。同时,第二次调用进入num=1的函数,将其递增为2,在控制台中打印2,然后第一次调用继续执行num=2,因此也打印2。

4 回复 | 直到 6 年前

CrazySynthax 9 年前

阅读了回复后,我明白了我描述的场景(控制台将打印“2”两次)是不可能的。

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

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

在这种情况下,两个AJAX调用都发生在不同的线程中,我们无法确定哪一个将首先结束。

user2446768 9 年前

Frish 9 年前

虽然它可能无法直接解决您的问题,但建议使用 eventListener

此外,要使变量成为全局变量,您可以在不使用“var”的情况下对其进行调用——这可能并不完全是您希望使用“num”之类的泛型来实现的,但这将使其成为全局变量(更多信息) here ).

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

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

Alex Nikulin 9 年前

你只需要承诺解决订单问题。

var num = 0;

var executing = new Promise(function(resolve, reject){
     resolve();
});

var btnHandle = function(){
  executing.then(createJobInstanse());
}

var createJobInstanse = function(){
 return function(){
      return new Promise(function(resolve, reject){
        // fake asynchronous operation from 10ms to 2000ms, with random execution time
        window.setTimeout(function(){
          console.log(num++);
          resolve();
        }, Math.floor(Math.random() * 2000) + 10);
      });
 };
}

  

var btn = document.querySelector("#btn");
btn.addEventListener("click",btnHandle);

<button id="btn" onclick="btnHandle">click</button>

推荐文章

Alvaro · mouseenter委派使用vanilla JavaScript?

8 年前

dotnetCarpenter · 如何检查侦听器事件是否为被动事件?

8 年前

Teight · 我的JavaScript代码在尝试使用keydown事件处理程序更改类中的变量时遇到问题

8 年前

jcarpenter2 · DOM-同步事件的计时与setTimeout

8 年前

john Smith · 包装器div上的Javascript模糊事件

8 年前

xiaolingxiao · 导航到页面后运行javascript

8 年前

Thomas Mathews · 从字符串动态创建按钮事件监听器,而不覆盖[重复]

8 年前

blazing · 如何在Typescript中使用EventTarget

8 年前

Alexander Solonik · 即使将事件传递给调度程序,Reducer也显示未定义

8 年前

dekzok · 这似乎不是一个有效的函数。为什么?

8 年前