前言:
功能描述:
<a>标签的onClick 方法调用Javascript方法,里面使用了$.post()方法,进入了方法弹出第一个对话框,执行完$.post()弹出第二个对话框。
测试发现bug:
Firefox浏览器测试:只能弹出第一个对话框,第二个弹不出来,使用fireBug,发现没有错误信息
google chrome 浏览器测试:正常弹出两个对话框。
bug解决:
原本认为浏览器兼容的问题,然后查了之后并没有发现。
万幸的解决了bug,是因为排查到原因是:$.post()异步执行引发的问题,改为$.ajax(),设置为同步即可。
代码演示
出现bug的代码如下:
function query(thisObj) {
alert("进入方法");
$.post("/Home/query", { "state": 1 }, function (data) {
alert("success");
});
}
优化后的代码:(将异步改为同步执行,因为$.post()本身就是异步的,所以这里我们使用$.ajax(),然后将异步执行关掉)
function query(thisObj) {
alert("进入方法");
$.ajax({
url: "/Home/query",
async: false,//这一步是非常重要的,作用是设置为同步执行
type: "POST",
data: { "state": 1 },
dataType: "json",
success: function (data) {
alert("success");
}
});
}
bug原因:
1.Firefox弹不出第二个对话框的原因:
function query()是同步执行
$.post()异步执行,
造成的后果是:
进入function query()后,执行到$.post(),开启异步执行$.post(),function query()继续往下执行,然后结束了自己,等$.post()执行完回调的时候,function query()已经结束了,所以也就无法执行了。