javascript - Javascript变量不会在循环外更新，在OK内

Question

我希望我不会在这里遗漏一些明显的东西。

function renderViews(containerId) {

    var root = '../Views/';
    var viewsDomStr = '';

    for (var i = 0; i < bundles.views.length; i++) {
            $.get(root + bundles.views[i], function (data) {
            viewsDomStr = viewsDomStr.concat(data);
        });
    }

    console.log(viewsDomStr);
    $('#' + containerId).append(viewsDomStr);

}

问题是仅在循环内viewsDomStr根据来自服务器的更新。我得到的只是重置为.dataforconsole.log(viewsDomStr);''

Answer 1

您正在调用的函数是异步的。

尝试

function renderViews(containerId) {

    var root = '../Views/';
    var viewsDomStr = '';

    function cb(){
        console.log(viewsDomStr);
        $('#' + containerId).append(viewsDomStr);
    }

    for (var i = 0; i < bundles.views.length; i++) {
            $.get(root + bundles.views[i], function (data) {
            viewsDomStr = viewsDomStr.concat(data);
            cb();
        });
    }
}

Answer 2

问题是$.get请求是异步的，因此程序继续运行并且不等待它。您想viewsDomStr在函数内部使用$.get。

function renderViews(containerId) {

    var root = '../Views/';

    for (var i = 0; i < bundles.views.length; i++) {
        $.get(root + bundles.views[i], function (data) {
            console.log(data);
            $('#' + containerId).append(data);
        });
    }

    // This section runs before $.get is finished
}

编辑：我发现这viewsDomStr实际上是多余的。您只是将文本添加到元素，因此您可以将其添加到$.get.

Answer 3

由于 get 方法发送异步请求，您可以使用setInterval每 1 秒检查一次响应：

function renderViews(containerId) {

    var root = '../Views/';
    var viewsDomStr = '';

    var success = false;

    for (var i = 0; i < bundles.views.length; i++) {
            $.get(root + bundles.views[i], function (data) {
            viewsDomStr = viewsDomStr.concat(data);
            success = true;
        });
    }

    var t = setInterval(function(){
        if(success) {
            console.log(viewsDomStr);
            $('#' + containerId).append(viewsDomStr);
            clearInterval(t);
        }
    },1000);
}

Answer 4

该get方法的匿名函数将是异步的（根据get自身的执行）。

简而言之，这一切都发生得太快了。