Question

我的目标是使我的外部javascript异步，以便不会阻止网站的呈现，并且当然，正如异步所做的那样，之后再加载javascript。

但是问题在于，似乎完全禁止加载我的外部javascript。

这是我的代码示例（不准确）。当用户单击添加时，输入将使数字增加一定数量。它来自jquery并获得点击和order.js来获取计算结果

public class Service : IService
{
    private object _lock = new object();
    private JwtSecurityToken _accessToken;

    public Service()
    {
        GetNewToken();
    }

    public async Task<object> GetSomething()
    {
        EnsureAccessTokenValidity();
        //Do the api call with the token
    }

    public async Task<object> GetSomethingDifferent()
    {
        EnsureAccessTokenValidity();
        //Do the api call with the token
    }

    private void EnsureAccessTokenValidity()
    {

        if (_accessToken.ValidTo > DateTime.UtcNow) return;
        lock (_lock)
        {
            if (_accessToken.ValidTo > DateTime.UtcNow) return;
            GetNewToken(); 
        }
    }

    private void GetNewToken()
    {
        //Get a new _accessToken 
    }
}

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

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

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

Answer 1

如果此操作始终（几乎每次）失败，则问题是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都编译为单个文件

Answer 2

尝试defer

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

这可以防止脚本阻止页面并按顺序加载

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

2 个答案: