JS范圍問題：如何在此腳本中重復使用位置數據？

Question

我有一個相當長的腳本，目前正在使用第二個AJAX調用來獲取數據，作為臨時的解決方法。

/admin/locations/suggest.json建議調用/admin/locations/suggest.json的地方，結果是一個對象數組。 將顯示一個列表，其中包含來自這些對象的數據。 單擊其中一個時，再次對/admin/locations/view/' + locationId + '.json進行AJAX調用以再次獲取位置數據。 該數據已經存在，但是在第一個AJAX調用返回的數據中。

我的問題現在是從on.click（）代碼內部訪問Locations變量。 我已經有了索引，除locations所有內容都沒有數據。

第一次通話后，如何填充locations並在on.click（）事件中使用它們？

SuggestLocation = function() {
    var locations = null;
    $('#NewLocation').hide();

    function suggestLocation(locations) {
        $.ajax({
            url: '/admin/locations/suggest.json',
            type: 'POST',
            data: $("#AgendaItemAdminAddForm, #AgendaItemAdminEditForm").serialize(),
            success: function (data) {
                var htmlString = '';
                for (var p in data.data) {
                    htmlString = htmlString + '<li data-index="' + p + '" data-id="' + data.data[p].Location.id + '">' + data.data[p].Location.display_name + '</li>';
                }
                $('#LocationSuggestions').html(htmlString);
                locations = data.data;
                console.log(locations);
            },
            dataType: 'json'
        });
    };
    $(document).on('click', '#LocationSuggestions li', function(event) {
        locationIndex = ($(this).data('index'));
        locationId = $(this).data('id');
        $.ajax({
            url: '/admin/locations/view/' + locationId + '.json',
            type: 'GET',
            data: null,
            success: function(data) {
                $('#SelectedLocation').html(
                    Mustache.render($('#LocationTemplate').html(), data.data)
                );
            },
            dataType: 'json'
        });
        $('#AgendaItemLocationId').val(locationId);
        $('#AgendaItemLocationId').val(locationId);
        $('#LocationFormFields').hide();
        $('#LocationSuggestions').html('');
        $('#NewLocation').show();
    });
    $('#LocationFormFields input, #LocationFormFields textarea').keydown(function() {
        suggestLocation();
    });
    $('#LocationFormFields select').change(function () {
        suggestLocation();
    });
    $('#NewLocation').click(function(event) {
        event.preventDefault();
        $('#AgendaItemLocationId').val($(this).data(''));
        $('#LocationFormFields').show();
        $('#SelectedLocation').hide();
        suggestLocation();
        $(this).hide();
        return false;
    });
};
SuggestLocation();

Answer 1

您在哪里：

var locations = null;

在外部范圍內創建位置 （ null的分配是多余的，它沒有任何用處），但是當您執行以下操作時：

function suggestLocation(locations) {

這會創建一個地方變量，該變量是對compositionLocation本地的，因此稍后在執行此操作時：

  locations = data.data;

數據將分配給該位置變量，而不是外部變量。 沒有對suggestLocation的調用都將參數傳遞給函數，因此只需除去位置作為形式參數，即可：

function suggestLocation() {

因此，該值將分配給SuggestLocation中所有功能可用的外部位置 。

請記住，AJAX調用是異步的，因此在嘗試訪問它之前，請確保已調用了回調函數並已分配了值。

此外，按照慣例，以大寫字母開頭的函數名稱保留給構造函數使用，因此， SuggestLocation是不合適的。 具有兩個名稱相同的功能（單個字母的大寫除外）也不是一個好主意。