JavaScript函数内部变量的外部访问策略与实践

function get_data_mapping_for_id_sync(path) {
    let id = $(path).attr('data-map-id');
    // 在这里可以执行一些同步操作，但如果函数的主要目的是获取id，可以直接返回
    return id;
}

// 外部代码调用并获取id
const retrievedId = get_data_mapping_for_id_sync('.some-path-selector');
if (retrievedId) {
    $('#pIP').val(retrievedId); // 使用获取到的id更新输入框
    console.log('Retrieved ID:', retrievedId);
}

// 在全局作用域声明一个变量
let currentDynamicId = null;

function get_data_mapping_for_id(path) {
    let id = $(path).attr('data-map-id');

    // 将局部变量id的值赋给全局变量
    currentDynamicId = id; 

    Swal.fire({
        title: 'Loading data...',
        willOpen: function() {
            $('.site-plan').addClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').addClass("highlight-path"); // id在这里仍然可用，因为它在闭包中

            Swal.showLoading();
            $.get(endPoint, {
                action: 'get_data_mapping_for_id',
                id // id在这里作为参数传递
            }, function(data) {
                Swal.hideLoading();
                jsonResp = JSON.parse(data);
                const table = jsonToHTMLTable(jsonResp, $(path));
                Swal.update({
                    title: jsonResp.title,
                    html: table,
                    confirmButtonText: 'OK'
                });
            });
        },
        willClose: function() {
            $('.site-plan').removeClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').removeClass("highlight-path");
        }
    });
}

// 调用函数
get_data_mapping_for_id('.some-path-selector');

// 在函数调用之后，可以访问全局变量 currentDynamicId
// 注意：如果get_data_mapping_for_id内部有异步操作，
// currentDynamicId可能在这些异步操作完成之前就被访问了，
// 所以需要确保在正确的时间点访问。
// 例如，在一个点击事件处理器中调用 get_data_mapping_for_id，
// 然后在另一个事件处理器中读取 currentDynamicId。
setTimeout(() => { // 示例：模拟异步操作后的访问
    if (currentDynamicId) {
        $('#pIP').val(currentDynamicId); // 使用全局变量的值更新输入框
        console.log('Global ID accessed:', currentDynamicId);
    }
}, 1000); // 延迟1秒，确保get_data_mapping_for_id有时间执行

function get_data_mapping_for_id(path) {
    let id = $(path).attr('data-map-id');

    Swal.fire({
        title: 'Loading data...',
        willOpen: function() {
            $('.site-plan').addClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').addClass("highlight-path");

            // 在这里，id是可访问的，并且DOM元素#pIP应该已经存在
            // 所以，在这里设置输入框的值是正确的时机
            $('#pIP').val(id); // 解决用户“cannot set the input value while inside the code”的问题

            Swal.showLoading();
            $.get(endPoint, {
                action: 'get_data_mapping_for_id',
                id
            }, function(data) {
                Swal.hideLoading();
                jsonResp = JSON.parse(data);
                const table = jsonToHTMLTable(jsonResp, $(path));
                Swal.update({
                    title: jsonResp.title,
                    html: table,
                    confirmButtonText: 'OK'
                });
                // 如果需要，异步请求成功后也可以再次更新输入框
                // 例如，如果jsonResp中包含一个更新的ID：
                // $('#pIP').val(jsonResp.newId || id); 
            });
        },
        willClose: function() {
            $('.site-plan').removeClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').removeClass("highlight-path");
        }
    });
    // 注意：这里不能直接 return id; 因为Swal.fire是异步的，
    // 函数会立即返回，而Swal.fire的回调函数可能还没有执行。
    // 如果必须在外部获取id，需要使用Promise或回调函数。
}

// 示例：如何使用Promise将id传递出去（更现代的异步处理方式）
function get_data_mapping_for_id_with_promise(path) {
    return new Promise((resolve, reject) => {
        let id = $(path).attr('data-map-id');

        Swal.fire({
            title: 'Loading data...',
            willOpen: function() {
                $('.site-plan').addClass("zoom-svg");
                $('path[data-map-id="' + id + '"]').addClass("highlight-path");
                $('#pIP').val(id); // 可以在这里设置

                Swal.showLoading();
                $.get(endPoint, {
                    action: 'get_data_mapping_for_id',
                    id
                }, function(data) {
                    Swal.hideLoading();
                    jsonResp = JSON.parse(data);
                    Swal.update({ /* ... */ });
                    resolve(id); // 在Swal.fire处理完毕后，通过Promise解析id
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    reject(errorThrown); // 处理请求失败
                });
            },
            willClose: function() { /* ... */ }
        });
    });
}

// 外部调用示例
get_data_mapping_for_id_with_promise('.some-path-selector')
    .then(retrievedId => {
        console.log('ID obtained via Promise:', retrievedId);
        // 此时 retrievedId 已经可用，可以在这里进行其他操作
        // 例如：$('#anotherInput').val(retrievedId);
    })
    .catch(error => {
        console.error('Error getting ID:', error);
    });