Question

我对JavaScript（侦听器）方法的执行顺序有疑问。虽然我很欣赏下面的代码可能不是最佳实践，但有什么方法可以保证下面的函数在btn1被更改时触发的命令？

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

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

E.g。是否有可能根据JS代码＆＃34;出现在＆＃34;中的顺序断言？（即在实际的js / html文件中列出），（＃btn1更改时）： 1. doStuff（）将首先执行 2. doStuff（）将在调用doMoreStuff（）之前完全完成 - 假设所有doStuff正在做的是更新DOM

我有一个真实的例子，doStuff更新DOM，doMoreStuff使用更新的DOM值调用Ajax端点 - 并且希望确保doStuff将始终首先被调用（再次基于它的片状设计＆＃ 34;列出＆＃34;第一个。

谢谢，达明

Answer 1

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

只要您的第一个change函数不是异步的，就应该是第一个函数在第二个函数启动之前完成执行的情况。我们可以通过在第一个change函数中添加一个循环来测试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

JavaScript侦听器的执行顺序

1 个答案: