Ajax同步异步问题

Ajax同步异步问题

作为一个后端，公司莫得前端，所以只能强行写不熟悉的前端代码，遇到无数坑
本来就是一个获取数据库中菜单权限字段的js方法，获取到权限之后显示一个操作按钮，方法如下：

function checkMenu() {
	var mes= [];
	$.ajax({
		type : 'get',
		url : '/menus/owns',
		contentType : "application/json; charset=utf-8",
		success : function(data) {
			mes = data;
			$("[menu]").each(function() {
				var me = $(this).attr("menu");
				if ($.inArray(me, data) < 0) {
					$(this).hide();
				}
			});
			
		}
	});
	return mes;
}

但是不知道为什么html中的js代码调用这个方法并赋值给一个变量之后这个变量是空的

输出结果

一开始思路是在ajax的success方法里直接return，这样总可以了吧

function checkMenu() {
	var mes= [];
	$.ajax({
		type : 'get',
		url : '/menus/owns',
		contentType : "application/json; charset=utf-8",
		success : function(data) {
			mes = data;
			$("[menu]").each(function() {
				var me = $(this).attr("menu");
				if ($.inArray(me, data) < 0) {
					$(this).hide();
				}
			});
			console.log("方法中的mes===" + mes);
			return mes;
		}
	});
	
}

于是改成了这样，前台打印日志变成了

开始有东西了
这里已经有点端倪了，先打印了html中调用方法的日志，然后才打印了方法里的日志
经过仔（bai）细（du）研（yi）究（xia）之后发现是ajax的async的锅
async不写默认为true，也就是异步请求，如果为true则不会等请求成功之后再执行ajax请求下面的代码
于是加上一句
async : false,

就都可以打印成功了
页面也如愿出现了按钮