body onload函数调用异常，HTML表格拉取谷歌CSV数据显示错误

问题原因 #

你代码中的xmlhttp变量未声明局部作用域，默认成为全局共享变量。先后调用loadData()和loadData2()时，后者创建的XMLHttpRequest实例会直接覆盖前者的实例，导致第一个请求的回调函数触发时，读取的xmlhttp实际是第二个请求的对象，因此两个单元格都展示第二个请求返回的20，和onload调用逻辑无关。

修复方案 #

只需要在两个函数内创建xmlhttp变量时，添加let（或者var）声明为函数局部变量即可，避免全局覆盖。

修复后的完整JavaScript代码如下：

function loadData() {
    console.log('loadData');
    var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRxRr2GAVpZAtGlpG3vQVDIwqjHjWq3z2Y-NQOf5Tu9IoEZDRQAQwevq8LSIXgwcql6EMyINFf04Dp2/pub?gid=0&single=true&range=B2&output=csv";
    // 加var声明为局部变量，避免全局覆盖
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("display").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
}


function loadData2() {
    console.log('loadData2');
    var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRxRr2GAVpZAtGlpG3vQVDIwqjHjWq3z2Y-NQOf5Tu9IoEZDRQAQwevq8LSIXgwcql6EMyINFf04Dp2/pub?gid=0&single=true&range=B3&output=csv";
    // 加var声明为局部变量，避免全局覆盖
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("display2").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
}

function start() {
    loadData();
    loadData2();
}

你的HTML代码不需要做任何修改，替换上述JS代码即可正常运行。

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