JS动态插入并立即执行回调函数的方法

在编写JavaScript代码时，有一些情况下需要动态插入代码，并在执行该代码后立即执行回调函数。这个过程需要结合使用jQuery和JavaScript的一些特性。

使用jQuery的getScript方法

使用jQuery的getScript方法可以加载并立即执行外部js文件，并在js执行完成后立即执行回调函数。示例代码如下：

$.getScript("external_script.js", function() {
  // 回调函数
  console.log("Script Loaded and Executed!");
});

使用JavaScript的createElement方法

使用JavaScript的createElement方法可以创建script标签，然后将src属性指向需要动态插入js文件的地址，再将创建好的script标签插入到html页面中，从而实现动态插入JS文件的功能。示例代码如下：

const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'external_script.js';
script.onload = function() {
  // 回调函数
  console.log("Script Loaded and Executed!");
};
head.appendChild(script);

需要注意的是，当动态插入js文件时，必须保证回调函数在js文件完全加载并执行后执行。在上述示例中，使用src属性加载js文件时，需要给script标签添加onload事件，以确保回调函数在js文件加载并执行完成后被触发。

示例说明

下面是两个使用示例，分别演示了使用jQuery方法和JavaScript方法动态加载外部js文件并立即执行回调函数：

示例1

$.getScript("https://code.jquery.com/jquery-3.5.1.min.js", function() {
  // 回调函数
  console.log("jQuery Loaded and Executed!");
  $("body").append("<p>Hello World!</p>");
});

上述示例中，会动态加载jQuery库，并在加载完成后插入一个p标签并输出日志。

示例2

const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-3.5.1.min.js';
script.onload = function() {
  // 回调函数
  console.log("jQuery Loaded and Executed!");
  $("body").append("<p>Hello World!</p>");
};
head.appendChild(script);

上述示例和示例1类似，只不过这里使用了JavaScript的createElement方法，还是插入了p标签并输出日志。

总结

本文介绍了使用jQuery和JavaScript的createElement方法动态插入外部js文件并立即执行回调函数的方法，对于需要按需加载js文件并执行js代码的场景下非常实用。