让插入到 innerHTML 中的 script 跑起来的实现代码

首先需要了解一下，当通过 innerHTML 插入的 script 标签在页面渲染时会被认为是异步加载，因此可能会导致 script 中的内容没有被完全加载执行，而造成一些问题。为了解决这个问题，可以使用两种方法来让插入到 innerHTML 中的 script 能够正常执行。

方法一：使用 DOM API 动态创建 script 标签，避免使用 innerHTML 插入

代码示例：

// 创建 script 标签
var script = document.createElement("script");

// 设置 script 内容，可以是一个外部 JS 文件地址或者直接写 JS 代码
script.innerHTML = 'console.log("Hello World!");';

// 将 script 添加到 body 元素中
document.body.appendChild(script);

在这种方式下，script 标签会被立即执行，并且可以正常使用变量和函数等内容。同时，也不存在 innerHTML 插入的异步加载问题。

方法二：使用 setTimeout 延迟执行插入的 script 代码

代码示例：

// 创建 script 标签
var script = document.createElement("script");

// 设置 script 内容，可以是一个外部 JS 文件地址或者直接写 JS 代码
script.innerHTML = 'console.log("Hello World!");';

// 将 script 添加到 body 元素中
document.body.appendChild(script);

// 延迟执行插入的 script 代码
setTimeout(function() {
  eval(script.innerHTML);
}, 0);

在这种方式下，使用 setTimeout 将插入的 script 代码延迟执行到下一轮循环中，避免了异步加载问题，并且也可以正常使用变量和函数等内容。但需要注意的是，setTimeout 并不是立即执行，因此需要设置一个足够小的延迟时间保证执行顺序正确。