简友广场

踩过的坑--ajax异步调用

2020-05-18  本文已影响0人  迷夏湖

ajax在js中经常会用到,最近就遇到个很奇怪的问题,获取的值用控制台打印出来总是不符合预期,由于数据很多,逻辑很复杂,跟踪了很久才找到原因,其实也很简单,就是异步调用顺序问题。

将问题简化下,就是一个函数A调用函数B,函数B通过ajax查后台数据,然后返回数据。由于异步调用的特性,其实很容易踩这个坑,在数据返回前,函数B造就返回了。看下下面这个例子就很容易明白了。

function testFunc() {
    alert("调用函数前...");
    var data = getDataFunc();
    alert("调用函数后...");
}
function getDataFunc() {
        $.ajax({
        //async:false,
        url: yourUrl,
        data:{
        },
        success:function(result){
            alert("函数中ajax调用返回数据..."); 
            data = result;
        }
        alert("函数返回...");
        return data;
}

ajax默认为异步执行, 上面的例子中调用testFunc时, alert弹出依次为:调用函数前-->函数返回-->调用函数后-->函数中ajax调用返回数据, 这时数据会紊乱,达不到预期效果。

如果将async设置为false,即以非异步方式执行,那么alert弹出依次为: 调用函数前-->函数中ajax调用返回数据-->函数返回-->调用函数后。 这是符合预期的。
如果不清楚这个,很容易就掉到这个坑里。

上一篇 下一篇

猜你喜欢

热点阅读