从另一个JavaScript文件中调用JavaScript函数

Question

4

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

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

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

这是second.js文件：

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

- Ande Mohit

只需反转你所包含脚本的顺序，这个问题就可以解决了。 - Karan Dhir

5个回答

8

简而言之：在依赖于它们之前加载所需的依赖项。

您不能调用尚未加载的函数。

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

请颠倒脚本元素的顺序。

- Quentin

5

只有在同一文件中定义或在尝试调用之前加载的文件中定义的函数才能被调用。

只有在相同或更大的作用域中，才能调用函数。

你在first.js中声明了函数fn1，然后在second.js中就可以直接调用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>

它工作得很好 :)

- Reda Maachi

0

在 second.js 文件中

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

尚未测试，但应该可以工作

即使您的js函数顺序不正确，此函数也将等待所有文件加载完成后执行

- Munkhdelger Tumenbayar

0

您正在尝试访问一个目前不可用的函数，因此在这种情况下无法使用。但是您可以做以下操作：

您必须在使用函数之前加载它们。因此，请反转脚本的顺序。

defer属性是很少使用的属性之一。正如属性名称所示，defer指示脚本标记的内容在页面加载完成之前不执行。

- Jai

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vishal-L · Accepted Answer

使用在ECMAScript 6（ES6）规范中引入的import/export。

second.js

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

first.js

import { secondFun } from 'second.js';

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