时间戳

首页 > 解决方案 > 在外部 JavaScript 错误中添加“异步”

javascript - 在外部 JavaScript 错误中添加“异步”

问题描述

我的目标是异步我的外部 javascript，这样网站的呈现就不会被阻止，当然就像 async 所做的那样，之后加载 javascripts。

但问题是，我的外部 javascript 似乎完全无法加载。

所以这是我的代码示例（不准确）。当用户单击添加时，输入会增加一定数量的数字。它来自 jquery，它在其中获取点击和 order.js 以获取计算

<!doctype html>
<html lang="en"> 
    <head>
        <script async src="/js/jquery.min.js"></script>
        <script async src="/js/order.min.js"></script>
    </head>
    <body>
        <p>Hello World</p>
        <input type ="text">
        <button id="add">+</button><button id="sub">-</button>
    </body>
</html>

问题是点击不起作用，我不知道该怎么做。

我想改善加载时间，但异步不适用于 jquery。因为，没有输入异步应该有一个默认值，但是当我添加异步时没有默认值（来自 order.js 的值）并且按钮不起作用（jquery）。

更新：我尝试使用“延迟”，但问题与异步相同。按钮不适用于 jquery，并且输入没有默认值。

标签： javascriptjquery

解决方案

如果这始终失败（几乎每次），那么问题是 order.min.js 比 jquery.min.js 更小并且加载速度更快。这意味着：

    <script async src="/js/jquery.min.js"></script>
    <script async src="/js/order.min.js"></script>

最终是这样的：

    <script src="/js/order.min.js"></script>
    <script src="/js/jquery.min.js"></script>

所以 order.min.js 会在加载 jquery 之前尝试使用 jquery 函数。这显然会失败。

修复方法是使 jquery 同步加载：

    <script src="/js/jquery.min.js"></script>
    <script async src="/js/order.min.js"></script>

或者将 order.min.js 中的代码包装在可以检测 jquery 的东西中：

// Inside order.js:
function wait_for_jquery () {
    if (window.jquery !== undefined) {

        // put the rest of the code for order.js here

    }
    else {
        setTimeout(wait_for_jquery,100); // check 10 times per second
    }
}
wait_for_jquery();

另一种常见的技术是使用 webpack 或 browserify 之类的捆绑器将 jquery 和 order.js 编译到单个文件中

推荐阅读