执行外部JS后加载您的JavaScript

Question

我遇到了一个有点棘手的问题，我正在尝试对具有class pop-up的

应用一个简单的JQuery代码行addClass，但问题是在jQuery(document).ready(function($){})之后无法访问pop_up类。

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

如何使用JQuery添加类，使得在外部JS被执行后可以找到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文件是否已准备就绪并已加载？

- Sanie.Y

---

我相信这种方法会奏效：使用超时脚本并在此脚本中执行必要的操作。然后其余部分可以执行。另外，看一下这个链接（https://dev59.com/vXA65IYBdhLWcg3wqQc8）。可能有所帮助。 - Satej S

这段其他代码是在何时添加“pop_up”类的？是在加载时还是其他时间？而且哪一段代码先执行？ - Mario Plantosar

在引入外部脚本后，只需包含您的jQuery代码即可。 - Velimir Tchatchevsky

你有外部JS的访问权限吗？如果有，那么你可以触发一个事件。 - pistou

Answer 1

你可以在页面中多次使用 $(document).ready()。代码按照它出现的顺序运行。

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

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

- KiwiJuicer

Answer 2

用 setTimeout 来检查的一种方法是：

function checkForElement() {

  setTimeout(function() {

    if ($('.pop_up').length) {
      $('.pop_up').addClass('importantRule');
    } else {
      checkForElement();
    }

  }, 100);

}

checkForElement();

这将等待100毫秒，然后检查。如果它不在那里，它将再次等待，如此往复。

- BenG

---

有点重，但它会工作。只要你不必等待太久，它就不会花费太多。 - Narxx

Answer 3

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

- Mario Plantosar

Answer 4

你遇到了一种竞态条件。如果外部脚本先完成运行，那么你的代码将会正常工作，但如果你的代码先完成，那么它就会出错。

你可以像Satej S在评论中建议的那样绕过这个问题，设置一个合理的超时时间，确保外部脚本已经完成运行，在超时后再运行你的脚本。

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

更好的解决方案是使用来自外部脚本的回调（您能编辑外部脚本吗？）。这样，外部脚本结束后，它会调用您内部函数之一开始工作。

- Narxx

---

我无法编辑外部脚本，即使您的解决方案完全准确，但我必须使用$(window).load，因为它在我的情况下完美地工作。 - Ahmad Sanie

我不确定这是否是一个好的解决方案。如果外部JS只需要500毫秒，那么你将浪费2500毫秒在等待上。而且你无法真正计算出最佳超时时间，因为外部JS的处理时间可能会因用户（电脑、网络速度等）而异。 - pistou

@pistou 3000只是一个例子。显然需要根据外部脚本加载所需的时间进行调整。可能是500毫秒，也可能是5000毫秒... $(window).load很棘手。您可能希望进一步测试边缘情况，确保外部脚本在窗口完成加载之前始终完成加载。 - Narxx

我知道3000只是一个例子。我的观点是，它可能需要500毫秒的时间，对于其他一些人可能需要5000毫秒；这取决于很多事情。我认为找到最佳时间可能会很棘手。 - pistou

@pistou 是的，你说得对。这确实是一种hack方法，不是最佳实践。在某些情况下，在某些假设下，它可能运行得相对良好，但同样容易出现问题。 - Narxx

Answer 5

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

希望这可以帮到你！谢谢

- ashok93