如何正确结合setTimeout调用JavaScript的addEventListener？回调未执行排查

原代码错误原因 #

document.addEventListener('load', setTimeout(callBack, 2000))的核心问题是：setTimeout()执行后返回的是定时器ID（数字类型），而addEventListener的第二个参数要求必须是函数对象，因此触发TypeError报错。

修改后代码不生效的原因 #

• 事件绑定对象错误：document本身不会触发load事件，该事件需绑定在window对象上（当页面所有资源加载完成时触发）；若仅需DOM结构加载完成即可执行，可使用document的DOMContentLoaded事件。
• 函数调用错误：第二种写法里setTimeout(callBack(), 2000)是直接执行callBack函数，而非将函数作为参数传递给setTimeout，导致callBack立即执行，且定时器接收的是函数执行后的返回值（此处为undefined），无法按预期延迟触发。

正确写法示例 #

写法1：绑定window的load事件（等待所有资源加载完成） #

window.addEventListener('load', function() {
  setTimeout(callBack, 2000);
});

function callBack(){
    const data = JSON.parse(localStorage.data);
    const tbody = document.getElementById("info");
    for (let obj in data){
        let td = document.createElement('td');
        let text = document.createTextNode(`${data[obj]}`);
        td.appendChild(text);
        tbody.appendChild(td);
    }
};

写法2：绑定DOMContentLoaded事件（DOM加载完成即执行） #

若无需等待图片、样式表等资源加载完成，推荐使用该写法，触发时机更早：

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(callBack, 2000);
});

function callBack(){
    const data = JSON.parse(localStorage.data);
    const tbody = document.getElementById("info");
    for (let obj in data){
        let td = document.createElement('td');
        let text = document.createTextNode(`${data[obj]}`);
        td.appendChild(text);
        tbody.appendChild(td);
    }
};

额外注意事项 #

• 确认localStorage.data存在且为合法JSON格式，否则JSON.parse会报错，导致callBack执行中断。
• 若data是数组，for (let obj in data)会遍历数组原型上的属性，建议改用for...of或普通for循环。

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