JavaScript监听器的执行顺序

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

$(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使用更新的DOM值调用Ajax端点 - 并且要确保doStuff总是首先被调用（再次基于它首先被“列出”的片状设计）。

感谢，达明

来源

2014-10-17 Damo

据我所知，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>

正如你所看到的，第二次开始前第一个结束。

来源

2014-10-17 13:32:52

据我所知，事件监听器被添加到队列中，所以当监听事件发生时，它们将按照它们被声明的顺序被调用。 – 2014-10-17 13:45:59

重要的是要注意，虽然该事件冒泡会影响订单。在这种情况下，当然不会有事件冒泡。 – 2014-10-17 14:36:49

“只要你的第一个改变功能不是异步的”，它不是。虽然“second”声明的函数确实会调用Ajax。很想获得你提到的那个文档。这段代码是prod代码的代表，其中Ajax调用的系统日志记录意味着第一个函数尚未完成。 – Damo 2014-10-17 14:49:05

JavaScript监听器的执行顺序

回答

相关问题