javascript - JS 范围问题 : How can I reuse the locations data in this script?

Question

我有一个相当长的脚本，现在正在使用第二个 AJAX 调用来获取数据作为临时解决方法。

在进行建议调用的地方/admin/locations/suggest.json结果是一个对象数组。将显示一个列表，其中包含这些对象的数据。单击其中之一时，将再次对 /admin/locations/view/' + locationId + '.json 进行第二次 AJAX 调用以获取位置数据。该数据已经存在，但位于第一个 AJAX 调用返回的数据中。

我现在的问题是从 on.click() 代码内部访问 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) {

创建一个 locations 变量，该变量是 suggestLocation 的本地变量，因此稍后当您这样做时:

  locations = data.data;

数据被分配给该locations变量，而不是外部变量。对 suggestLocation 的调用都不会向函数传递参数，因此只需将 locations 作为形式参数即可，即:

function suggestLocation() {

因此该值被分配给外部位置，可供SuggestLocation内的所有功能使用。

请记住，AJAX 调用是异步的，因此请确保在尝试访问回调之前已调用回调并分配了值。

此外，按照惯例，以大写字母开头的函数名称是为构造函数保留的，因此 SuggestLocation 不合适。除了单个字母的大写之外，两个函数的名称相同也不是一个好主意。