在多个异步操作中，由于不确定异步操作的执行顺序，如何判断异步操作在已经执行完成的情况下，再执行一个新的操作，有哪些方法可以实现？

方法一、函数回调：

js中把函数当做对象来传递，是异步编程最基本的方法，在异步执行完成后，在执行里面的回调方法，这样不会出现程序堵塞的情况，例如：

function fn(callback){
　　　setTimeout(function(){
　　　　　　callback("异步后执行");
　　　}, 1000);
}
function fn_1(data){
	console.log('执行：'+data)
}
fn(fn_1);

说明：

优点：使用简单、设计灵活、比较容易理解。
缺点：不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱，而且每个任务只能指定一个回调函数。  

方式二、事件监听:

采用事件驱动模式,方法的执行是根据某个事件的发生来决定的，在异步执行完成后触发事件，来执行新的操作：

var _listeners={};
Function.prototype.on=function(name,fn) { //监听事件：[事件名称，执行方法]
	if(typeof fn === "function") {
        _listeners[name]=fn;
    }  
};
Function.prototype.trigger=function(name,data){ //执行事件：[事件名称，传递数据]
	if(name && _listeners[name]){  
	   _listeners[name](data);
	}
};
function fn(){
　　setTimeout(function(){　
　　　　fn.trigger('done',"异步后执行");//fn发起done的事件
　　}, 1000);
}
function fn_1(data){
	console.log('执行：'+data);
}
fn.on('done', fn_1);
fn();

说明：

采用这种方法可以绑定多个事件，指定多个操作，有利于模块化，但是程序都变成了事件驱动，对运行流程变的不那么清晰。

方法三：Promises对象

采用Promise来包装异步操作，然后定义async 函数，用await等待promise异步执行完成后，执行新的操作

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve('异步后执行')
        }, 1000)
    })
}
var fn_1 = async function() {
    var data = await fn();//等待异步操作执行完了后执行的方法
    console.log('执行：'+data);
}
fn_1();

说明：

实现起来简洁高效，不仅实现了回调逻辑的解耦，还实现了基础的异步流程控制

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/347