JavaScript系列之回调函数callback

今天药忘吃喽~ 2021-08-13 12:55 389阅读 0赞

JavaScript回调函数的使用是很常见的，引用官方回调函数的定义：

> A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

解释得很明确，回调函数就是作为参数传递给另一个函数并在其父函数完成后执行的函数。

听起来似乎有点不好理解，所以还是举例进行说明，介绍回调函数之前先简单说明一下同步和异步，前端也有同步和异步。同步和异步总得来说，两者最明显的区别就是是否需要等待，如果是串行执行的就是同步机制，是并行执行的就是异步机制，这个比较好理解

回调函数的使用并没有同步和异步的区别，回调函数只是一种特殊的函数，可以应用于同步调用场景，也可以应用于异步调用场景

*  异步请求中的回调函数  
    最常用的有ajax异步调用或者事件机制，例子：

$.get('${root}/saveOrUpdate.do',function(result){ 
    			alert(result);
    			});

*  同步请求中的回调函数

业务场景：举个例子，点击按钮会触发main函数，进行接口数据保存(异步方式)，数据保存成功之后，再回调打开弹窗的函数

保存数据函数：

function saveRecord(seq,callback){ 
    	$.ajax({ 
    			url:'${root}/saveOrUpdate.do',
    			type:"post",
    			async:true,
    			success:function(result){ 
    				//确保callback是一个函数类型的
    				if(typeof(callback)==='function'){ 
    						callback(true);
    				}
    			}
    		});  
    }

main函数

//保存成功，才会打开弹窗
        function main(seq){ 
        	saveRecord(seq,callbackFunction);
        }

回调函数，数据保存成功后再调用

/*保存时的回调函数*/
         function callbackFunction(saveSuccess){ 
         	if(saveSuccess){ 
         		//省略打开弹窗代码
         	}
         }