1、原因分析
先写下ajax代码:我们需要执行异步的ajax然后获取数据1,然后赋值给全局变量global=0,让其更新为1;
var global = 0;
console.log('1: '+global);//我们期待的第一步
$.ajax({
url:xxx/xxx/xxx,
type:'POST',
data:xxx
success:function(data){//假设ajax返回的数据data为1;
global = data;
console.log('2: '+global);//我们期待的第二步
}
});
console.log('3: '+global);//我们期待的第三步
我们期待的结果是global被更新赋值了,如下输出顺序:
1: 0
2: 1
3: 1
可是结果呢?很遗憾并不是这样的,实际的结果会是以下这样的:
1:0
3:0
2:1
这是为什么呢,这当然是因为ajax的异步机制导致的。简单来说就是:当我们使用ajax异步方式请求时,ajax请求还没结束,之后的代码就可能会执行,从而会造成不按顺序执行的问题,也就导致了callback函数中不能同步更新全局变量。
2、解决办法
这里吐槽下,网上大多数都是说将ajax的aysn改为false,也就是同步。这样毫无疑问是可以的,但是ajax最好的东西异步不能实现在有些实际项目中就没有了实际意义,同时浏览器console还会弹出警告提示,这样是在实际项目中是没法达到要求的。这里目前我绞尽脑汁暂时想到的算是一个比较笨的方法,但能解决该问题。
利用Html5带的sessionStorage本地存储解决。
var global = 0;
console.log('1: '+global);//我们期待的第一步
$.ajax({
url:xxx/xxx/xxx,
type:'POST',
data:xxx
success:function(data){//假设ajax返回的数据data为1;
window.sessionStorage.setItem("golobal",data);
console.log('2: '+JSON.parse(window.sessionStorage.getItem("golobal"));//我们期待的第二步
}
});
golobal= JSON.parse(window.sessionStorage.getItem("golobal"));
console.log('3: '+global);//我们期待的第三步
虽然执行顺序仍然是1、3、2(事实上ajax异步非阻塞的模式导致顺序是改变不了的),但是global全局变量已经被成功更新赋值为1,达到要求。
1:0
3:1
2:1