如何在script2.js中访问script1.js内的块级变量id

问题根源 #

1. id 用 let 声明时，若未挂载到全局作用域，其他脚本无法访问
2. id 是在异步函数中赋值的，script2 直接执行 console.log(id) 时机过早，大概率拿不到最新赋值

方法1：挂载到全局window对象 #

修改 script1，将 id 挂载到全局 window 对象上，确保跨脚本可访问：

// script1.js
// 初始化全局属性
window.id = undefined;
search_input.addEventListener("keyup", (e) => {
    async function searchItem(API) {
        // 补全fetch请求，原代码遗漏该步骤
        const response = await fetch(API);
        const data = await response.json();
        let ItemList = data.results;
        for(/* 你的循环条件 */) {
            // 赋值给全局window.id
            window.id = API_per_element_id;
        }
    }
    let API = `apiurl&query=${e.target.value}`;
    searchItem(API);
});

script2 中需注意异步时机，避免拿到初始值：

// script2.js
// 监听输入事件，延迟确保异步请求完成后打印
search_input.addEventListener("keyup", () => {
    setTimeout(() => {
        console.log(window.id);
    }, 500);
});

方法2：使用自定义事件（更规范，无全局污染） #

通过事件传递数据，无需暴露全局变量：

// script1.js
search_input.addEventListener("keyup", (e) => {
    async function searchItem(API) {
        const response = await fetch(API);
        const data = await response.json();
        let ItemList = data.results;
        for(/* 你的循环条件 */) {
            const id = API_per_element_id;
            // 触发自定义事件，携带id数据
            window.dispatchEvent(new CustomEvent("idUpdated", { detail: id }));
        }
    }
    let API = `apiurl&query=${e.target.value}`;
    searchItem(API);
});

// script2.js
// 监听自定义事件，获取最新id
window.addEventListener("idUpdated", (event) => {
    console.log(event.detail); // 此处为最新赋值的id
});

方法3：Promise封装异步结果 #

用Promise存储id的异步赋值结果，确保拿到最新值：

// script1.js
// 定义全局Promise存储异步结果
window.idPromise = null;
search_input.addEventListener("keyup", (e) => {
    window.idPromise = (async function searchItem(API) {
        const response = await fetch(API);
        const data = await response.json();
        let ItemList = data.results;
        let id;
        for(/* 你的循环条件 */) {
            id = API_per_element_id;
        }
        return id;
    })(`apiurl&query=${e.target.value}`);
});

// script2.js
// 等待Promise完成后打印id
async function printId() {
    if (window.idPromise) {
        const id = await window.idPromise;
        console.log(id);
    }
}
// 绑定输入事件触发打印
search_input.addEventListener("keyup", printId);

内容的提问来源于stack exchange，提问作者Sahil Kumar Sah