`

ajax在js下按顺序执行

阅读更多

最近做项目遇到用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得到的是空值,简直无语了

分享到:
评论

相关推荐

    ajax请求之返回数据的顺序问题分析

    本文实例分析了ajax请求之返回数据的顺序问题。分享给大家供大家参考,具体如下: ajax请求一个url,php后端处理后,数组为如下格式: 代码如下:$a = array( ‘-1’=> 10 ,’-3′ => 2, ‘0’ => ‘5’ ,’-2′ => ...

    Javascript在页面加载时的执行顺序.pdf

    在Firefox和Opera中,由于它们按照加载顺序执行,所以先弹出`test.js`中的值,然后是内联脚本中的值。而在IE中,由于`document.write()`的特性,可能会导致`tmpStr`未定义的错误。 为了解决IE中的问题,我们可以...

    Javascript在页面加载时的执行顺序.docx

    1. **加载顺序**:JavaScript代码按照它们在HTML文档中出现的顺序执行。无论是内部还是外部引用的脚本,都会遵循这一原则。 2. **全局变量与函数**:每个脚本定义的全局变量和函数都可被后续脚本访问。 3. **变量...

    jquery中ajax函数执行顺序问题之如何设置同步

    默认情况下,AJAX请求是异步的(即`async`为`true`),但如果将其设置为`false`,请求则会同步执行,这会导致后续的JavaScript代码在AJAX请求完成前不会执行。 在jQuery中,可以使用`$.ajax`方法并通过设置`async: ...

    Javascript异步执行不按顺序解决方案

    在上述标题和描述中提到的问题主要涉及两个案例,都是关于如何解决JavaScript异步执行不按顺序的问题。 案例一: 在懒加载或滚动事件触发的场景中,可能会连续触发多个Ajax请求,并期望将返回的数据按照特定顺序...

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    当这两个文件通过`<script>`标签按顺序引入时,无论它们是否并行下载,1.js总是在2.js之前执行。这可以通过延迟发送文件内容的PHP脚本来验证,确保1.js的内容先被浏览器接收到,从而先执行。 综上所述,理解浏览器...

    SSM+js+ajax同步

    在IT行业中,尤其是在Web开发领域,Ajax(Asynchronous JavaScript and XML)是一种常用的技术,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本篇内容将深入讲解如何利用Ajax实现同步操作,...

    JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    顺序执行是它的基本原则。 其次,可以在 HTML 页面中直接嵌入 JavaScript 代码片段。例如: ```html <script>alert(1) ``` 这种内嵌代码片段同样遵循自上而下的执行顺序,但在某些特定情况下,内嵌的 JavaScript ...

    uselessjs一个用于控制javascript异步并发后执行顺序的小型库

    在现代Web应用中,由于Ajax、Promise、async/await等技术的广泛应用,异步编程变得越来越常见,同时也带来了挑战,如如何避免回调地狱、如何合理安排任务的执行顺序等。useless.js 就是为了应对这些挑战而设计的。 ...

    Ajax 动态载入html页面后不能执行其中的js快速解决方法

    // 按顺序分段执行js var jsNums = jsContained.length; for (var i = 0; i ; i++) { var jsSection = jsSection[i].match(regGetJS); if (jsSection[2]) { if (window.execScript) { // IE专用 window....

    让火狐、谷歌支持Ajax

    在探讨“让火狐、谷歌支持Ajax”这一主题时,我们首先需要理解Ajax(Asynchronous JavaScript and XML)是什么,以及它为何对现代Web开发如此重要。Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的...

    2010html执行顺序.docx

    在给定的示例中,JavaScript的执行顺序是:`alert(1)`、`alert(2)`(来自外部文件`a.js`)、`alert(3)`,以及对`<input id="a">`的操作。如果在`<input>`元素之上放置一个`<script>`标签来获取`id="a"`的元素,由于...

    AJAX Javascript 调试利器

    在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术是不可或缺的一部分,它使得网页可以无需刷新就能与服务器进行数据交互,提升了用户体验。然而,随着复杂性的增加,调试AJAX应用变得越来越困难。幸运...

    浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考

    JavaScript中处理大批量异步任务并保证它们按顺序执行是前端开发中常见但又复杂的问题。本文从实际案例出发,详细介绍了在实现浏览器端大体积文件上传和断点续传功能时遇到的挑战以及解决这些问题的思路。以下是根据...

    Ajax+SQL Server无刷新实现图片切换特效 .

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。在这个案例中,Ajax被用来实现在不重新加载整个...

    多个ajax同时进行

    这意味着你可以发送多个请求,并且它们会同时进行,而不是按顺序执行。这显著提高了用户界面的响应速度,特别是在需要加载大量数据或执行多个独立任务时。 2. **Promise和async/await**:随着ES6的推出,Promise和...

    基于JavaScript切片的AJAX框架网络爬虫技术研究

    近年来,随着互联网技术的快速发展,AJAX(Asynchronous JavaScript and XML)作为一种能够提高用户交互体验的技术,在Web开发领域得到了广泛的应用。AJAX通过在后台与服务器进行少量数据交换,使得Web页面无需重新...

    jquery中的ajax如何返回结果而非回调方式即为同顺序执行

    为了获得返回结果并按顺序执行,可以将`async`参数设置为`false`,使`$.ajax`变为同步操作。 以下是如何在jQuery中实现同步`$.ajax`请求的示例: ```javascript function getSyncData(url, params) { var outdata...

    jsp页面中的代码执行加载顺序介绍.docx

    - **脚本部分**:按出现顺序执行,即从上到下。 - **表达式**:在脚本执行的过程中按顺序计算并输出结果。 - **指令部分**:在转换阶段处理,不会直接影响执行顺序。 ##### 3. JavaScript的执行顺序 在JSP页面中...

Global site tag (gtag.js) - Google Analytics