在外部JS执行后加载JavaScript

Loading your JavaScript after an external JS get executed

本文关键字：加载 JavaScript 执行 外部 JS      更新时间：2023-09-26

我遇到了一个有点棘手的问题，我正试图将一行简单的JQuery代码addClass应用于具有class pop-up的div但问题是pop_up类在jQuery(document).ready(function($){}); 之后是不可访问的

这个类实际上是从外部JS和pop_up功能中添加的也是从外部JS添加的，所以我想知道

如何在外部JS执行后使用JQuery添加类，以便使用找到pop_up类 

$('.pop_up');

我尝试过的：

jQuery(document).ready(function($) {
    $('.pop_up').addClass('importantRule');
    $('.pop_up').toggleClass('importantRule');
});

这是不起作用的，因为外部JS以某种方式在.ready之后添加了类，所以如果您试图打印出$('.pop_up')，它将是未定义的。

我还尝试使用div.pop_up的常量类容器来查找类，如下所示：

$('div.element').find('.pop_up').addClass('importantRule');

这也不起作用，我知道事实上，问题在于调用.ready中的函数，因为外部JS在它之后是如何执行的，所以

这附近有吗

如果没有，是否有方法检测所有外部JS文件是否已准备好并加载

您可以在一个页面中多次使用$（document）.ready（）。代码将按其出现的顺序运行。

您可以对代码使用$(window).load()事件，因为这发生在页面完全加载并且各种$(document).ready()处理程序中的所有代码都已运行完毕之后。

$(window).load(function(){
  //your code here
});

一种方法是使用setTimeout检查：-

function checkForElement() {
  setTimeout(function() {
    if ($('.pop_up').length) {
      $('.pop_up').addClass('importantRule');
    } else {
      checkForElement();
    }
  }, 100);
}
checkForElement();

这将等待100毫秒，然后进行检查。如果它不在那里，那么它将一次又一次地等待，等等。

您遇到了比赛条件。如果外部脚本首先完成运行，那么您的代码就会工作，但如果您的代码首先完成，那么它就会中断。

你可以像Satej S在评论中建议的那样绕过它，并给出一个合理的超时，以确保外部脚本完成运行，然后在超时后运行你的脚本。

setTimeout(function(){ doSomething(); }, 3000);

更好的解决方案是使用外部脚本的回调（你能编辑外部脚本吗？）。这样，外部脚本一结束，就会调用一个将开始工作的内部函数。

为了避免大多数其他答案所建议的超时，我建议您尝试在脚本include中添加"defer"标记。这样，试图添加类"importantRule"的脚本将等待，直到所有其他脚本都已加载并执行。

此外，我发现这个问题非常相似加载并执行脚本顺序

希望这能有所帮助！感谢

相关文章：