ES5中使用回调函数实现异步操作

同步变成异步方法

在ES5中 我们知道javascript是单线程的,所以所有的操作其实是同步操作,但是为了节省资源和时间,可以将同步的操作变为异步操作,我在做项目时遇到了类似问题(说白了就是调整程序执行的先后顺序【我这里是调整方法执行的先后顺序】)

看代码
//原本执行顺序 获取用户信息===》通过用户id获取用户订单
function getUserInfo(){
	//注意这里一般使用的是异步操作来获取用户信息
	console.log('使用ajax获取到用户信息【异步操作】')
	let user={id:'999'}
	return user;
}

//通过用户id获取用户订单信息
function getUserOrder(id){
	//注意这里一般使用的是异步操作来获取用户信息
	console.log('通过传来的用户id获取到用户订单信息【异步操作】')
	let order='获取到用户id:'+id+'的订单信息'
	return order;
}

//执行程序
const user=getUserInfo();
const order=getUserOrder(user.id);
//some code ....

真实执行结果:
直接报错,无法获取到订单信息,一般错误信息是没给getUserOrder方法传id,也就是传入的id是undefined

报错原因
是因为ajax是异步请求,会导致程序先执行·getUserOrder(user.id) 再执行getUserInfo(),,并不是我们所期望的,所以这里改造一下

改造执行顺序
//原本执行顺序 获取用户信息===》通过用户id获取用户订单
function getUserInfo(){
	//注意这里一般使用的是异步操作来获取用户信息
	console.log('使用ajax获取到用户信息【异步操作】')
	let user={id:'999'}
	return user;
}

//通过用户id获取用户订单信息
function getUserOrder(id){
	//注意这里一般使用的是异步操作来获取用户信息
	console.log('通过传来的用户id获取到用户订单信息【异步操作】')
	let order='获取到用户id:'+id+'的订单信息'
	return order;
}

//执行程序
const user=getUserInfo();
setTimeout(function(){
	const order=getUserOrder(user.id);
},300)
//some code ....

现在的执行结果:
获取到用户id:999的订单信息(使我们所期望的)

再看一个小的demo案例
//模拟创建自己的ajax
let ajax = function(callback) {
    console.log("开始执行ajax函数");
    let param={mongy:1000000000000,unit:'元'};
    console.log('获取到需要传入到回调的参数:',param)
    setTimeout(function(){
    	//执行回调函数
        callback(param)
    },1000);
};
let aa=function(param){
	//获取异步数据 
    console.log('拿到传入回调的结果:',param);
}

ajax(aa) 

写的不是很好,程序员干久了,表达能力被程序化,很不好描述~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值