Javascript使用window.load进行多个脚本调用

10 浏览
0 Comments

Javascript使用window.load进行多个脚本调用

我在一个HTML网页的头部有以下代码：

在"Image-Slider.js"文件中，我有一堆代码，然后在底部有windows.onload = function1;。

Image-Slider2.js是一个不同文件中完全相同的代码。唯一的区别是它们引用的HTML页面上的id不同。

无论哪个脚本先被调用，都能正常工作，而第二个脚本（Image-Slider2）却无法工作。

如何让这两个脚本在网页打开时都运行？

0

2 答案

0 Comments

问题的原因是使用了错误的方法。"Image-Slider"听起来像是一个库。你只需要包含它一次，然后使用另一个脚本文件来初始化图像滑块。如果你提供更多关于你使用的库的信息，我可以提供更详细的帮助。

解决方法是只需要将库文件包含一次，然后使用另一个脚本文件来初始化图像滑块。

0
0 Comments

在JavaScript中，使用onload =无法分配多个事件处理程序 - 第二次分配会覆盖前一次的分配，就像x = 3; x = 6会使x变为6一样。

为了解决这个问题，可以使用.addEventListener()方法来代替onload：

// 在一个JS文件中：
window.addEventListener('load', function1)
// 在下一个JS文件中：
window.addEventListener('load', function2)

如果你的代码使用全局变量，那么在两个文件中重复使用可能不起作用，因为它们会互相干扰，尝试使用相同的变量。你可以通过将代码结构化为不使用全局变量或全局函数来解决这个问题，例如将每个文件中的所有代码封装在一个函数中，如下所示：

// 包装函数
(function() {
  var anyVariableHere;
  function anyFunction() { }
  window.addEventListener("load", anyFunction);
})(); // 立即运行包装函数

谢谢。我现在已经让它们都运行起来了，确实有冲突。

那我是否需要在包装函数外部再添加一个addEventListener调用来调用包装函数呢？

不需要。注意到该函数末尾有() - 这会立即调用它，正如代码中的注释所述。这被称为“立即调用的函数表达式”或IIFE。更多详情请参考：benalman.com/news/2010/11/…

0