javascript - JavaScript监听器的执行顺序

Question

我对 JavaScript(监听器)方法的执行顺序有疑问。虽然我明白下面的代码可能不是最佳实践，但有什么方法可以保证当 btn1 更改时下面的函数将触发的顺序？

  $(function() {
    $('#btn1').change(function(){
            doStuff();
    });
  });

  $(function() {
    $(#btn1, btn2).change(function(){
            doMoreStuff();
    });
  });

例如是否可以根据 JS 代码“出现在”(即在实际 js/html 文件中列出)的顺序断言(当 #btn1 更改时):1. doStuff() 将首先执行2. doStuff() 将在调用 doMoreStuff() 之前完全完成——假设所有 doStuff 正在做的是更新 DOM

我有一个真实的例子，其中 doStuff 更新 DOM 并且 doMoreStuff 调用一个 Ajax 端点，使用更新的 DOM 值 - 并且想要确保 doStuff 总是首先被调用(再次基于它被“列出”的不稳定设计“首先)。

谢谢，达米安

Answer 1

据我所知，jQuery 确保事件处理程序按照它们的创建顺序触发(先进先出)。目前我找不到任何关于此的文档，但我确定我在过去的某个地方读过。

只要您的第一个 change 函数不是异步的，就应该是第一个函数将在第二个函数开始之前完成执行。我们可以通过在我们的第一个 change 函数中添加一个循环来测试它:

$(function() {
  $('#btn1').change(function(){
    console.log("First change event triggered at " + +(new Date()));
    
    for (var i = 0; i < 100000000; i++)
      continue;
    
    console.log("First change event finished at " + +(new Date()));
  });
});

$(function() {
  $('#btn1, #btn2').change(function(){
    console.log("Second change event triggered at " + +(new Date()));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="btn1"><option>1</option><option>2</option></select>
<select id="btn2"><option>1</option><option>2</option></select>

如您所见，第一个在第二个开始之前完成。