如何在$.getScript外部使用内部变量？Tumblr头像加载异常排查

问题原因 #

1. 异步请求时序错误：$.getScript是异步操作，你在发起请求后立刻拼接HTML并追加到DOM，但此时回调函数还未执行，头像数据还没获取到，导致<img>标签的src是undefined。
2. 变量作用域冲突：用var声明的循环变量会共享作用域，当异步回调执行时，循环已经结束，所有回调都会拿到最后一次循环的用户信息，同时初始的avatar变量未被赋值就被使用。
3. 循环边界错误：i <= lespotescorrect.length会导致最后一次循环访问lespotescorrect[i]时得到undefined，引发额外错误。

修正后的代码 #

for (let i = 0; i < lespotescorrect.length; i++) { 
    const cop_pseud = lespotescorrect[i][0];
    const cop_desc = lespotescorrect[i][1];
    const lienapi = `https://${cop_pseud}.tumblr.com/api/read/json?num=1`;
    
    // 先构建完整的列表项结构，暂不包含头像
    const $listItem = $(`
        <li>
            <a href="https://${cop_pseud}.tumblr.com/" target="_blank"></a>
            <div class="infobulle">
                <strong>${cop_pseud}</strong>
                <span>${cop_desc}</span>
            </div>
        </li>
    `);
    const $link = $listItem.find('a');
    
    // 异步获取头像后，插入到对应的链接标签内
    $.getScript(lienapi, function() { 
        const tumblrData = tumblr_api_read;
        const avatarUrl = tumblrData.posts[0].tumblelog.avatar_url_64;
        $link.append(`<img src="${avatarUrl}"/>`);
    });
    
    // 将列表项添加到目标容器
    $('#voilalescops').append($listItem);
}

关键修正点 #

• 把var替换为let/const，确保每次循环的变量都有独立的块级作用域，避免异步回调拿到错误的用户数据。
• 先创建完整的<li>元素并添加到DOM，再在异步回调中插入头像，保证头像数据返回后再更新DOM。
• 修正循环条件为i < lespotescorrect.length，避免访问数组越界的undefined项。
• 简化对象属性的访问方式，readData.posts[0].tumblelog.avatar_url_64和方括号写法效果一致，更易读。

内容的提问来源于stack exchange，提问作者amy