共计 1609 个字符,预计需要花费 5 分钟才能阅读完成。
JavaScript 宿主环境提供了许多性能,容许开发人员安顿异步操作。换句话说,咱们能够立刻触发一个动作,但这些动作须要消耗肯定的工夫能力实现执行。
setTimeout 函数就是一个典型的例子。
看看函数 loadScript(src),它应用给定的 src 加载脚本:
function loadScript(src) { | |
// creates a <script> tag and append it to the page | |
// this causes the script with given src to start loading and run when complete | |
let script = document.createElement('script'); | |
script.src = src; | |
document.head.append(script); | |
} |
上述代码创立一个 <script>
标记并将其附加到页面。这会导致具备给定 src 的脚本开始加载并在实现时运行。
生产形式也很简略:
// load and execute the script at the given path | |
loadScript('/my/script.js'); |
该脚本是 异步
执行的,因为它当初开始加载,但理论脚本的运行逻辑,绝大多数时候产生在函数 loadScript 曾经实现时。
如果 loadScript(…) 上面有任何代码,这些代码会立刻执行,而不会期待脚本加载实现再执行。
假如咱们须要在新脚本加载后立刻应用它。它申明了新函数 newFunction,咱们想要运行这个函数。
然而如果咱们在 loadScript(…) 调用之后立刻调用 newFunction,那就行不通了:
loadScript('/my/script.js'); // the script has "function newFunction() {…}" | |
newFunction(); // no such function! |
下面的代码基本不能失常工作。
天然,浏览器可能没有工夫加载脚本。到目前为止,loadScript 函数还没有提供跟踪加载实现的办法。脚本加载并最终运行,仅此而已。但咱们想晓得它何时产生,应用该脚本中的新函数和变量。
让咱们增加一个回调函数作为 loadScript 的第二个参数,它应该在脚本加载时执行:
function loadScript(src, callback) {let script = document.createElement('script'); | |
script.src = src; | |
script.onload = () => callback(script); | |
document.head.append(script); | |
} |
onload 事件用于在脚本加载执行后执行一个函数。
当初,如果咱们想从脚本中调用新函数,咱们应该在回调中写下:
loadScript('/my/script.js', function() { | |
// the callback runs after the script is loaded | |
newFunction(); // so now it works | |
... | |
}); |
一个理论生产 loadScript 的例子:
function loadScript(src, callback) {let script = document.createElement('script'); | |
script.src = src; | |
script.onload = () => callback(script); | |
document.head.append(script); | |
} | |
loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {alert(`Cool, the script ${script.src} is loaded`); | |
alert(_); // _ is a function declared in the loaded script | |
}); |
正文完
发表至: javascript
2022-08-12