从javaScript异步中的CallBack，再到 Promise（一）

异步

• 同步代码是一次执行，异步就是在同步以后执行的代码。

聊聊callback

• 解决异步的一种方式
• 常见的有ajax
• setTimeout

高阶函数

• 函数能够接受一个函数
• 函数返回一个函数

function after(times,callback){
	return function(){
		if(--times === 0){
			callback()
		}
	}
}

let fn = after(3,function(){
	console.log('我被调用三次了')
})
fn();
fn();
fn();//我被调用三次了
复制代码

• after接收一个参数和一个函数，并返回一个函数。
• 接受的函数经过条件选择执行这个函数。
• --time而不是time--否则函数运行就会少执行一次。

实现一个函数， 3s后才能获取结果

function run(){
	setTimeout(()=>{
		let text = 'runing'
		//return
	},3000)
}

run()
复制代码

咱们发如今异步环境中 调用函数根本读取不到值，使用 return也是一样的效果 因此解决异步 咱们就要经过传函数的方式来执行

function run(callback){
	setTimeout(()=>{
		let text = 'runing'
		//return
		callback(text)
	},3000)
}

run(function(text){
	console.log(text) //running
})
复制代码

从两个例子中咱们发现，每一次的执行callback，函数就要传参一个函数，从而会致使这样

function run(callback){
	setTimeout(()=>{
		let text = 'runing'
		//return
		callback(text)
	},3000)
}

run(function(text){
	console.log(text) //running
	run(function(text){
		console.log(text+'2') //running2
		run(function(text){
			console.log(text+'3') //running3
		})
	})
})
复制代码

在执行一次以后我还想在执行一次函数，就会出现多层嵌套（回调地狱），代码不美观，且若是当中一环出现了异常，咱们也很差捕获异常

多个异步同时执行，在某一时刻拿到最终结果

let numList = [];
function run(num){
	setTimeout(()=>{
		numList.push(num)
	},3000)
}
run(1)
run(2)
console.log(numList) //输出[]
复制代码

咱们发现最后结果为空数组，由于两次的调用都是为异步 如今咱们进行修改一下

let numList = [];
function after(times,callback){
	return function(){
		if(--times === 0){
			callback(numList)
		}
	}
}
let fn = after(2,function(data){
	console.log(data)
})
function run(num){
	setTimeout(()=>{
		numList.push(num)
		fn();
	},3000)
}
run(1)
run(2)
复制代码

咱们发现 在numList.length === 2 中2不能手动配置，假如我有一百个方法执行，那么就要去改 一旦基数不许，这个方法就挂了 因此能够借鉴咱们以前写的after方法

let numList = [];
function after(times,callback){
	return function(){
		if(--times === 0){
			callback(numList)
		}
	}
}
let fn = after(2,function(data){
	console.log(data)
})
function run1(num){
	setTimeout(()=>{
		numList.push(num)
		fn();
	},3000)
}
function run2(num){
	setTimeout(()=>{
		numList.push(num)
		fn();
	},3000)
}
run1(1)
run2(2)
复制代码

咱们写了一个方法，统一收集异步结果的逻辑 可是咱们代码写的不是很美观

发布订阅

let numList = [];
let Dep = {
	arr:[],
	on(fn){
		this.arr.push(fn)
	},
	emit(){
		if(numList.length === 2){
			this.arr.forEach(function(fn){
				fn();
			})
		}
	}
}
Dep.on(function(){
	console.log(numList) //[1,2]
})
Dep.on(function(){
	console.log('代码执行结束了')
})
function run1(num){
	setTimeout(()=>{
		numList.push(num)
		Dep.emit();
	},3000)
}
function run2(num){
	setTimeout(()=>{
		numList.push(num)
		Dep.emit();
	},3000)
}
run1(1)
run2(2)
复制代码

上面逻辑 咱们完成了 将须要发布的内容保存到队列里 在发布时让数组中的函数依次执行

🤗🤗🤗新手本身的理解。勿喷。