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

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

只有在与尝试调用该函数的范围相同或更大的范围内，才能调用该函数。

首先在函数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 2

在ES6中使用import/export，

second.js

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

first.js

import { secondFun } from 'second.js';

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

Answer 3

tl; dr：在依赖之前先加载您的依赖。

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

在第一个文件完成所有顶级语句的运行之前，不会加载第二个JS文件中定义的功能。

颠倒脚本元素的顺序。

Answer 4

在 second.js

中

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

没有测试但是想工作

即使您的js不正确的队列功能命令，此功能也要等到所有文件加载后才能执行

Answer 5

您正在尝试访问我尚不可用的功能。因此，您不能在这种情况下使用。但是您可以做什么：

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

defer属性是很少使用的属性之一。您可以通过属性名称来辨别，defer指示在页面加载之前不执行script标记的内容。