关于Jquery 异步Ajax回调函数中数据变量不能赋值给外部全局变量的原因分析及解决方法

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