2

「モジュール」の配列を実行するためのJavaScriptをいくつか書きました。モジュールごとに ajax 呼び出しを行い、モジュールの html を取得し、モジュールをページ レイアウトの 2 つの列のいずれかにダンプします。

var modules = [
    { name: 'ExchangeStatus', title: 'Exchange Status', column: 'left' },
    { name: 'Grid', title: 'Contacts', column: 'right' }
    { name: 'Filters', title: 'Filters', column: 'left' }
],
modulesUrl = '/Modules/';

for (var count = 0; count < modules.length; count++) {
    var module = modules[count];

    // Get module HTML.
    $.ajax({
        url: modulesUrl + module.name,
        success: function (moduleHtml) {

            // Append module HTML to appropriate element.
            $('#' + module.column + 'Column').append(moduleHtml);

            // Custom event to trigger the module to load its data.
            var initializeModuleEvent = $.Event('initialize' + module.name);
            initializeModuleEvent.firstLoad = true;
            $(document).trigger(initializeModuleEvent);

        }
    });
}

これに関する問題は、for ループが競合状態を作成することです。forループはajaxコールバックが戻るずっと前に終了するため、ajaxコールバックmodule.columnでは、ほとんどの場合、最後のモジュールの値です。各コールバックが適切なモジュールを処理するようにモジュール変数を維持するにはどうすればよいですか? 現在、ループ内の最後のモジュールが左の列にあるため、3 つのモジュールはすべて左の列になります。

4

5 に答える 5

7

渡す追加のスコープを作成してみることができますmodule:

for (var count = 0; count < modules.length; count++) {
    var module = modules[count];

    (function(module) {
      $.ajax({
        ...
      })
    }(module));

編集：必要に応じて、次のものも使用できますforEach：

modules.forEach(function(module) {
 // 'module' will be available everywhere in this scope
});
于 2013-01-31T23:08:15.953 に答える
2

成功のコールバックを次のように変更します。

$.ajax({
    url: modulesUrl + module.name,
    success: (function (module) {
        return function (moduleHtml) {
            // Append module HTML to appropriate element.
            $('#' + module.column + 'Column').append(moduleHtml);

            // Custom event to trigger the module to load its data.
            var initializeModuleEvent = $.Event('initialize' + module.name);
            initializeModuleEvent.firstLoad = true;
            $(document).trigger(initializeModuleEvent);
        };
    }(module));
});

moduleこれにより、適切な変数値の新しいスコープが作成されます。

ajaxここで呼び出し全体をラップする必要はありません。

于 2013-01-31T23:09:15.467 に答える
2

for ループを使用する代わりに、jquery の each.. を使用して問題を解決します。

var modules = [
    { name: 'ExchangeStatus', title: 'Exchange Status', column: 'left' },
    { name: 'Grid', title: 'Contacts', column: 'right' }
    { name: 'Filters', title: 'Filters', column: 'left' }
],
modulesUrl = '/Modules/';

$(modules).each( function(index, elem)
{
    var module = elem;

    // Get module HTML.
    $.ajax({
        url: modulesUrl + module.name,
        success: function (moduleHtml) {

            // Append module HTML to appropriate element.
            $('#' + module.column + 'Column').append(moduleHtml);

            // Custom event to trigger the module to load its data.
            var initializeModuleEvent = $.Event('initialize' + module.name);
            initializeModuleEvent.firstLoad = true;
            $(document).trigger(initializeModuleEvent);

        }
    });
}
}
);
于 2013-01-31T23:29:09.003 に答える
1

それは役立つだろう

for (var count = 0; count < modules.length; count++) {
    var module = modules[count];

    (function (module) {
        // Get module HTML.
        $.ajax({
            url: modulesUrl + module.name,
            success: function (moduleHtml) {

                // Append module HTML to appropriate element.
                $('#' + module.column + 'Column').append(moduleHtml);

                // Custom event to trigger the module to load its data.
                var initia`enter code here`lizeModuleEvent = $.Event('initialize' + module.name);
                initializeModuleEvent.firstLoad = true;
                $(document).trigger(initializeModuleEvent);

            }
        });
    })(module)
}
于 2013-01-31T23:08:39.160 に答える
0

この方法を試して、うまくいくかどうか教えてください！

for (var n = 0; n < modules.length; n++) {
(function () {
    var i = n;
        var module = modules[i];

        // Get module HTML.
        $.ajax({
            url: modulesUrl + module.name,
            success: function (moduleHtml) {

                // Append module HTML to appropriate element.
                $('#' + module.column + 'Column').append(moduleHtml);

                // Custom event to trigger the module to load its data.
                var initializeModuleEvent = $.Event('initialize' + module.name);
                initializeModuleEvent.firstLoad = true;
                $(document).trigger(initializeModuleEvent);

            }
        });
    } ());
}
于 2013-01-31T23:17:54.397 に答える