nodejs学习笔记（三）——javascript的回调与nodejs的事件循环

偏执的太偏执、 2022-07-16 03:28 199阅读 0赞

举个简单的例子说明一下回调：我们有两个函数a和b，在程序运行过程中我们希望在函数a运行完成以后再运行函数b，一般会这样写：

function a(){
    	console.log("enter function a");
    }
    
    function b(){
    	console.log("enter function b");
    }
    
    a();
    b();

把上例代码保存在test6.js中，然后通过node test6.js命令来验证（字符串“enter function a”会先于字符串“enter function b”打印）：

![20161001104825517][]

但是在函数a包含异步请求的情况下就可能发生函数a未执行完成就开始执行函数b的情况。下面我们来构造一下这种场景（这里继续使用上一篇笔记里的web application例子），增加一个html页面：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    
    </body>
    </html>
    <script>
    function a(){
    	$.ajax({
    	    type: "GET",
    	    url: "test3",
    	    dataType: "json",
    	    success: function(data){
    		   	console.log(data.name);
    		   	console.log("enter function a");
    		}
    	});
    }
    
    function b(){
    	console.log("enter function b");
    }
    
    a();
    b();
    </script>

增加的html名称和位置如下：

![20161001111808611][]

启动tomcat，然后访问http://localhost:8080/firstWebProject/test6.html（这里补充说明一下笔者使用的浏览器信息：chrome53.0.2785.101）打开控制台查看打印信息：

![20161001112147969][]

可以看到虽然在代码顺序上函数a应该先执行，但是实际上函数b的打印信息在函数a未执行完成时就打印了。那么在这种情况下我们怎么保证函数执行的时序呢，一般我们会这么干（把html中的javascript代码稍微调整下）：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="lib/jquery-3.0.0.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    <script>
    function a(){
    	$.ajax({
    	    type: "GET",
    	    url: "test3",
    	    dataType: "json",
    	    success: function(data){
    		   	console.log(data.name);
    		   	console.log("enter function a");
    		   	b();
    		}
    	});
    }
    
    function b(){
    	console.log("enter function b");
    }
    
    a();
    </script>

即不直接调用函数a后接着调用函数b，而是在函数a异步请求完成时调用函数b，然后刷新一下刚才访问的页面：

![20161001114748227][]

从打印信息可以看到是先执行了函数a，然后才执行了函数b。这里其实已经有了回调的雏形，但是硬编码把函数b写在函数a里面显然并不合适，比如在函数a执行完成后需要根据情况调用函数b还是函数c，在硬编码写回调的基础上修改则工作量较大且难以维护。接下来我们在硬编码写回调的基础上再优化一把：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="lib/jquery-3.0.0.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    <script>
    function a(arg){
    	$.ajax({
    	    type: "GET",
    	    url: "test3",
    	    dataType: "json",
    	    success: function(data){
    		   	console.log(data.name);
    		   	console.log("enter function a");
    		   	arg();
    		}
    	});
    }
    
    function b(){
    	console.log("enter function b");
    }
    
    a(b);
    </script>

可以看到结果与上面硬编码写回调是相同的：

![20161001144311618][]

和硬编码唯一的不同就是我们在声明函数a时同时声明了函数a需要一个回调函数参数，并在函数a内部合适的位置（例子中是发起请求完成后）调用回调函数，且在调用函数a时再传入回调函数参数b，来达到函数a运行完成后再运行函数b的结果。

在定义函数a的时候只定义了回调函数名，那么如果回调函数需要传入在函数a内没有的信息作为参数该如何处理？下面再给出解决这个问题的一个例子（简单的说，就是在调用函数a的时候就把回调函数所需的参数传进去，即函数a的参数应包含函数b的参数）：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="lib/jquery-3.0.0.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    <script>
    var b_name = "func";
    function a(arg0,arg){
    	$.ajax({
    	    type: "GET",
    	    url: "test3",
    	    dataType: "json",
    	    success: function(data){
    		   	console.log(data.name);
    		   	console.log("enter function a");
    		   	arg(arg0);
    		}
    	});
    }
    
    function b(name){
    	console.log("enter function b"+" "+name);
    }
    
    a(b_name,b);
    </script>

执行结果如下图：

![20161001145655073][]

那如果回调函数的参数个数不定的情况该如何处理（即回调函数b有一个参数，回调函数c有两个参数，这两个函数都有可能是函数a的回调函数，此时我们在定义函数a时就不确定该为回调函数构造几个参数了）？非常简单，在定义回调函数的时候可以把参数定义成一个对象（一个参数则对象包含一个键值对，两个参数则对象包含两个键值对，以此类推），函数a只需要为回调函数定义一个对象参数，在调用回调函数的时候把这个对象参数传给回调函数，由回调函数内部来解析这个对象参数。

另外要注意的是：回调函数并不意味它必须在前一个函数执行完成后再执行，它在前一个函数的哪个位置执行是可控的。

说完了原生javascript的回调，再说一下nodejs的事件循环模块——events。笔者认为events实质上是对回调的一个系统管理，所以把它和回调放在一个章节来说（实际上shell脚本里的hook钩子、java里的监听都算是回调管理，events的使用看起来更接近java的监听）。下面的例子来源于runoob，笔者调整补充了部分注释：

var events = require('events');
    var eventEmitter = new events.EventEmitter();
    
    // 回调函数1，在nodejs中为监听器
    var listener1 = function listener1() {
       console.log('run listener1');
    }
    
    // 回调函数2
    var listener2 = function listener2() {
      console.log('run listener2');
    }
    
    // 为回调函数1绑定监听事件，当触发监听事件时执行回调函数
    eventEmitter.addListener('connection', listener1);
    
    // 为回调函数2绑定监听事件，当触发监听事件时执行回调函数，addListener和on效果相同
    eventEmitter.on('connection', listener2);
    
    // 读取事件管理对象某一监听事件上的回调函数个数
    var eventListeners = events.EventEmitter.listenerCount(eventEmitter,'connection');
    console.log(eventListeners + " listener");
    
    // 触发监听事件 
    eventEmitter.emit('connection');
    
    // 移除监听事件绑定的某一回调函数
    eventEmitter.removeListener('connection', listener1);
    console.log("listener1 remove");
    
    // 触发监听事件
    eventEmitter.emit('connection');
    
    // 读取事件管理对象某一监听事件上的回调函数个数
    eventListeners = events.EventEmitter.listenerCount(eventEmitter,'connection');
    console.log(eventListeners + " listener");
    
    console.log("complete");

把上例代码保存在test7.js中，然后通过node test7.js命令来验证：

![20161001173048969][]

可以看到当我们触发监听事件后，注册到监听事件的回调函数被执行了（当动态移除监听事件绑定的回调函数后，只有剩下的绑定回调函数被执行了）。

相比之前例子中的回调，events加入了一个监听事件的中间层，用于链接回调函数和调用者，这样调用者和回调函数就无需互相感知了（即我们之前例子里的函数a无需在函数内部写回调函数的调用了，甚至不感知有回调函数的存在——监听事件可以不绑定任何回调函数），取而代之的行为是触发一下监听事件。

nodejs的events模块的API：[https://nodejs.org/api/events.html][https_nodejs.org_api_events.html]

[20161001104825517]: /images/20220716/30eff64bfee249c1afa22a3d1d1f18c2.png
[20161001111808611]: /images/20220716/f2101e8ce4404f08ae08d10eafabd8bd.png
[20161001112147969]: /images/20220716/8fe105f3672847f98b9ed1f6c47ac301.png
[20161001114748227]: /images/20220716/9cfa5d7022824b02b383f0ceea71775b.png
[20161001144311618]: /images/20220716/1146f5c416c24449a3e040e15627c7b6.png
[20161001145655073]: /images/20220716/c5b06321c249433f856126577a50fde0.png
[20161001173048969]: /images/20220716/93f57949925b4cb0a9eb36a0116944e6.png
[https_nodejs.org_api_events.html]: https://nodejs.org/api/events.html