如何让点击按钮触发的函数等待DOMContentLoaded后定义的对象执行

核心原因 #

• 定义在DOMContentLoaded回调内部的toPrevious属于局部函数，全局作用域无法访问，因此行内onclick触发时会报函数未定义
• picker实例仅在DOM加载完成后才会初始化，提前调用会读取到未定义的值

推荐方案：移除行内onclick，DOM加载完成后绑定事件 #

这是最符合现代前端开发规范的写法，不需要定义全局变量，也不会出现作用域冲突问题：

1. 首先修改HTML代码，移除button的onclick属性：

<button id="prev"> Previous</button>
<button id="next">Next</button>

2. 修改头部的script代码，在DOMContentLoaded回调内直接绑定点击事件：

document.addEventListener('DOMContentLoaded', (event) => {
    const picker = new Picker(document);

    // 绑定上一页按钮点击事件
    document.getElementById('prev').addEventListener('click', function() {
      console.log("hi");
      picker.toPrev(document);
    });

    // 下一页按钮绑定逻辑同理补充
    // document.getElementById('next').addEventListener('click', function() {
    //   picker.toNext(document);
    // });
});

兼容方案：保留行内onclick写法 #

如果你的场景必须保留行内onclick的调用方式，可以通过全局变量占位+初始化判断的方式实现：

// 全局作用域定义占位变量和函数
let picker = null;
function toPrevious() {
  // 仅当picker初始化完成后才执行逻辑，未初始化时点击不会报错
  if (!picker) return;
  console.log("hi");
  picker.toPrev(document);
}
// 下一页的toNext函数同理定义
// function toNext() {
//   if (!picker) return;
//   picker.toNext(document);
// }

document.addEventListener('DOMContentLoaded', (event) => {
    // 初始化后给全局picker变量赋值
    picker = new Picker(document);
});

这种方式不需要修改原有HTML的按钮代码，初始化前点击按钮不会触发逻辑也不会报错，初始化完成后点击即可正常执行。

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