从另一个javascript文件调用javascript函数

Question

<html>
<head>
<script src="./first.js"></script>
<script src="./second.js"></script>
</head>
</html>

从first.js文件中，我想调用second.js中的函数

secondFun(); //calling function from second.js file

这是second.js文件

function secondFun(){
console.log('second function called!!')
}

Answer 1

tl; dr：在依赖它们之前加载您的依赖项。

您无法调用尚未加载的函数。

在第一个文件运行完所有顶级语句之后，才会加载第二个JS文件中定义的函数。

颠倒脚本元素的顺序。

Answer 2

除非在同一文件中定义了函数或在尝试调用它之前加载了函数，否则无法调用该函数。

除非函数与尝试调用它的范围相同或更大，否则无法调用函数。

你在first.js中声明了函数fn1，然后在第二个你可以有fn1（）;

1.js：

function fn1 (){
    console.log('second function called!!')
}

2.js：

fn1();

index.html：

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

它工作得很好:)

Answer 3

在ES6中使用import/export，

second.js

export function secondFun(){
console.log('second function called!!')
}

first.js

import { secondFun } from 'second.js';

然后在第一个文件中调用secondFun。

Answer 4

在second.js

document.addEventListener("DOMContentLoaded", function(event) {
  function secondFun(){
    console.log('second function called!!')
    }
});

没有测试但是假设工作

即使你的js没有正确的队列功能顺序，这个函数也会等到所有加载的文件都执行完毕

Answer 5

您正在尝试访问我尚未提供的功能。所以，你不能在这种情况下使用。但你能做什么：

您必须先加载您的功能才能使用它们。因此，颠倒脚本的顺序。

defer属性是很少使用的属性之一。正如您可以通过属性的名称所知，defer指示脚本标记的内容在页面加载之前不会执行。