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

首先需要了解一下，当通过 innerHTML 插入的 script 标签在页面渲染时会被认为是异步加载，因此可能会导致 script 中的内容没有被完全加载执行，而造成一些问题。为了解决这个问题，可以使用两种方法来让插入到 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 并不是立即执行，因此需要设置一个足够小的延迟时间保证执行顺序正确。