jquery ajax的异步如何转换成同步?

2020-04-26 20:12:59 java常见问答 6512

Jquery的相关知识,在本网站中有很多文章,关注我们的小伙伴们也对jquery很熟悉了吧,今天小编给大家带来jquery的相关知识,跟着小编的步伐一起复习并且学习新知识哦,接下来让我们一起来了解下吧。

在实际使用的过程中,我们经常会使用到Ajax,然而所谓的ajax便是可以局部刷新网页。

在使用的时候,可能会遇上需要从一个接口中得到一个数组和数据对应的id,在另一个接口上再得到数据,刚开始的写法:

$.get(url1, function (data)
        {
            var dom = [];
            for (var i = 0; i < data.length; i++)
            {
                var item = data[i];
                //两个url不一致,根据id查找另一个表
                $.get(url2, function (data)
                    {
                        var item_result = data;
                        dom.push("
                            item_result.id ");
                        });
                }
                $("#id")
                    .empty()
                    .append(dom.join(‘‘));
            });

但是此时经常会出现数组清空后并没有写入数据的问题,刚开始学习的人也会认为是接口错误的问题,然而并不是这个原因所导致的。

这是由于$get()等Ajax方法在调用接口时需要时间,导致push还未完成的时候,已经发生了append的行为,即就在此时数组清空,但是dom数组中在这个时候并没有对join读取的数据

故此处需要将循环中的Ajax修改为同步,根据上面的代码进行了修改如下:

$.get(url1, function (data)
        {
            var dom = [];
            for (var i = 0; i < data.length; i++)
            {
                var item = data[i];
                //在第二次的Ajax前将异步改同步
                $.ajaxSettings.async = false;
                //两个url不一致,根据id查找另一个表
                $.get(url2, function (data)
                    {
                        var item_result = data;
                        dom.push("
                            item_result.id ");
                        });
                    //注意在ajax中的push完成后,将其改回异步
                    $.ajaxSettings.async = true;
                }
                $("#id")
                    .empty()
                    .append(dom.join(‘‘));
            });

好了,今天的知识就讲到这里了,今天小编给大家带来的知识,小伙伴们记得巩固哦,如果想要了解更多的知识,那么就请继续关注本网站常见问题专栏了解吧。