ajax在js下按顺序执行

最新推荐文章于 2023-02-09 11:10:31 发布

原创最新推荐文章于 2023-02-09 11:10:31 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax在js下实现异步

ajax，js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决Ajax异步获取数据时遇到的问题，通过使用$.Deferred()和$.when().done()方法确保数据加载完成后才进行后续操作，避免了因异步特性导致的数据未准备好就访问的情况。

最近做项目遇到用ajax从数据库取值，当把值放进数组之后得到的是空值，因为js是同步的，只能走单线程，ajax是异步的。

一开始的解决办法是将ajax设置成同步

即加一个属性

async: false

但是这种方法只在火狐浏览器有效，谷歌的说法是不提倡设置为同步，同一个页面打开第二次便会出错。

后来查资料，写了一种方法，测试在谷歌有效，直接贴代码

function getData3(){
    var defer = $.Deferred();
    $.ajax({
        url : 'get_meal_list.html',
        success: function(data){
            data.forEach(function(list) {
                var meal = {name: list.list, restaurant: list.restaurant, meal: list.meal, price: list.price};
                meal_list = JSON.parse(localStorage.getItem("meal_list")) || [];
                meal_list.push(meal);
            })
        }
    });
    return defer.promise();
}

function get_data(){
    $.when(getData3()).done(function(data){
        localStorage.removeItem('meal_list');
        localStorage.setItem('meal_list', JSON.stringify(meal_list));
    });
    console.log(localStorage.getItem('meal_list'))
}

重点在于第二段函数$.when().then，意义是上一个执行完之后执行执行，这样可以成功的得到meal_list

我之前的写法

function get_all_meal_list(){
    $.ajaxSettings.async = false;
    var meal_list=[];
    localStorage.removeItem('meal_list');
    $.ajax({url:"get_meal_list.html",success:function(data){
        data.forEach(function(list){
            var meal={name:list.list,restaurant:list.restaurant,meal:list.meal,price:list.price};
            meal_list = JSON.parse(localStorage.getItem("meal_list")) || [];
            meal_list.push(meal);
            localStorage.removeItem('meal_list');
            localStorage.setItem('meal_list', JSON.stringify(meal_list));
            console.log(localStorage.getItem('meal_list'))
        })
    }});
}

这样的话在另一而函数调用name_list得到的是空值，简直无语了