如何确保首先调用 javascript 函数？答案

【问题标题】：How to make sure that a javascript function is called first?如何确保首先调用 javascript 函数？
【发布时间】：2017-07-31 02:56:21
【问题描述】：

我正在开发一个 SaaS 平台。我无权访问 app.js 文件。但是，我可以在页脚中上传我自己的 JS。目前，我有一个功能，通过检查主包装器是否具有菜单活动类，单击测试以查看菜单是否打开。发生两件事之一，如果菜单处于活动状态，我删除覆盖，如果不是，我添加一类覆盖。不幸的是，我无权访问的 app.js 使用 toggleClass 删除了 CSS 的菜单活动类。有时，app.js 会删除我首先检查的类并弄乱我的功能。但是，大多数情况下它都有效。我怎样才能让我的函数点击在第一个 100% 的时间里被调用？我正在使用 JQuery 2.1.1

$(".menu-toggle").first().click(function () {
            if (!$("#wrapper").hasClass("menu-active")) {
                $("#wrapper").find("div:first").addClass("overlay");
            }
            if ($("#wrapper").hasClass("menu-active")) {
              $("#wrapper").find("div:first").removeClass("overlay");
            }
        });

【问题讨论】：

解决两个脚本之间的行为冲突似乎很棘手。为什么你不能访问 app.js 文件来修复它？
管理。和 SaaS。相信我，我很沮丧。

标签： javascript jquery

【解决方案1】：

您可以将支票包裹在setTimeout：

$(".menu-toggle").first().click(function () {
    setTimeout(function() {
        if (!$("#wrapper").hasClass("menu-active")) {
            $("#wrapper").find("div:first").addClass("overlay");
        }
        if ($("#wrapper").hasClass("menu-active")) {
            $("#wrapper").find("div:first").removeClass("overlay");
        }
    }, 1);
});

应该在浏览器更新 DOM 后进行检查。

【讨论】：

我不需要切换 if 语句 bc 添加设置计时器会延迟我的功能吗？
@user3562836 可能，这取决于您是否希望该类已被删除（有时不是）。或者您希望该类即将被删除（有时已经删除）。 setTimeout 不会将检查延迟任何明显的量（确切地说是 1 毫秒，尽管您可以将其设置为 0 并获得相同的结果），但它确实确保代码稍后执行。希望应该是在添加或删除任何类之后。
使用 setTimeout 是否天生就说明其他 JS 执行什么？
几乎它只是将超时放入一个在正常 JS 执行结束时检查的队列中，但它也是 not as clear-cut as that 并且可能不起作用。试试看。它可能有效，也可能无效。如果它不起作用，请告诉我。

【解决方案2】：

进行以下操作，

<link rel="preload" href="path-to-your-script.js" as="script">
<script>
   var scriptPriority = 
    document.createElement('script');
    scriptPriority.src = 'path-to-your-script.js'; 
    document.body.appendChild(scriptPriority);
</script>

关于：链接 rel 预加载 Link rel preload 是少数开发人员使用的方法，它几乎无人知晓，用于优先考虑脚本或链接 css。

【讨论】：

您使用它的频率如何？
我只用它来优先考虑我的主要js和css样式规则，没有更多！
这不会做任何事情。所有这一切都是为了确保一个脚本在另一个脚本之前加载，而不是在点击回调运行之前添加或删除一个类。