文章内容
2024/6/14 2:41:46,作 者: 黄兵
ReferenceError: menuAction is not defined
页面加载一个 js 文件之后调用函数，却出现了：
ReferenceError: menuAction is not defined
具体代码如下：
<script src="https://staticx.dev/da/js/auth-0.bundle.js" defer></script>
<script>menuAction();</script>
出现问题的原因：
由于 script 使用了 defer，而导致 auth-0.bundle.js 还没有加载，已经还是执行 menuAction() 函数，所以才会出现此函数未定义的错误。
关于 defer 的作用可以看这篇文章：script 标签 async defer 总结
解决方案：
<script src="https://staticx.dev/da/js/auth-0.bundle.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
menuAction();
});
</script>
上面代码首先判断页面是否记载完成，如果页面加载完成，才会执行 menuAction() 函数。
第二种方法：
<script src="https://staticx.dev/da/js/auth0.bundle.js" defer></script>
<script>
window.addEventListener('load', function () {
menuAction();
});
</script>
原理与上面差不多。
第三种方法：
确保 menuAction 的调用是在 auth0.bundle.js 加载并执行之后。以下是一个示例，确保调用代码在 auth0.bundle.js 脚本加载完成之后执行。
<script src="https://staticx.dev/da/js/auth0.bundle.js" defer></script>
<script defer>
function onScriptsLoaded() {
menuAction();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', onScriptsLoaded);
} else {
onScriptsLoaded();
}
</script>
参考资料：
其它相关推荐：
2、纯 Javascript 等效 JQuery $('document').ready(function(){});
3、纯 Javascript $().bind('click',function(){}) 实现方法
黄兵个人博客原创。
评论列表