AJAX遇到的坑——全局变量“不管用”

版权声明：本文为 [onefine] 原创文章，转载请注明出处： https://blog.csdn.net/jiduochou963/article/details/89789614

最近写项目用到ajax技术，写的过程一直不顺利。想要的结果是通过第一次ajax请求获取所有的项目列表，然后通过迭代ajax请求每一个项目的具体信息，代码如下：

<script>
$(function () {
    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }

    baseurl = "http://127.0.0.1:6800/";

    $.get(baseurl + 'listprojects.json', function (data, textStatus) {
        var projects = data.projects.slice(0, data.projects.length - 1);  // 获取所有项目
        console.log(projects);
        var json_result = {};
        for (s_project in projects) {
            console.log(s_project + ":" + projects[s_project]);
            $.get(baseurl + "listjobs.json", {
                project: projects[s_project]
            }, function (data, textStatus) {
                console.log("s_project:" + projects[s_project] + " data:" + data + " textStatus:" + textStatus);
                console.log(data);
                json_result[projects[s_project]] = data;
            }, 'json');
            sleep(2000);
        }

        sleep(8000);
        console.log(json_result);

    }, 'json');

})
</script>

其中的sleep()是自己实现的类似休眠的代码，本以为是因为异步的原因，请求的结果还没来得及存入json_result变量中，然后故意放了个休眠，可是执行结果还是没任何改变：

执行结果看成，处理休眠以为，迭代中请求的全部是projects数组中最后一项的数据。然后变量json_result的值也为空，出现了js全局变量“不管用”的情况。

---

通过关闭异步的方式可以解决，代码如下：

<script>
    $(function () {
        baseurl = "http://127.0.0.1:6800/";

        $.get(baseurl + 'listprojects.json', function (data, textStatus) {
            var projects = data.projects.slice(0, data.projects.length - 1);  // 获取所有项目
            console.log(projects);
            var json_result = {};
            $.ajaxSettings.async = false;  // 关闭异步
            for (s_project in projects) {
                console.log(s_project + ":" + projects[s_project]);
                $.get(baseurl + "listjobs.json", {
                    project: projects[s_project]
                }, function (data, textStatus) {
                    console.log("s_project:" + projects[s_project] + " data:" + data + " textStatus:" + textStatus);
                    console.log(data);
                    json_result[projects[s_project]] = data;
                }, 'json');
            }
            $.ajaxSettings.async = true;  // 开启异步
            console.log(json_result);
        }, 'json');

    })
</script>

执行结果如下：

改为同步之后就解决了问题，但唯一的缺点是有警告：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.