我尝试创建需要延迟加载数学符号的动态页面，所以我需要在所有数学符号加载完毕后调用MathJax。我试图阅读MathJax文档，发现：http://docs.mathjax.org/en/latest/advanced/typeset.html但当我按照它所说的去做时，我在控制台中得到了“ReferenceError:MathJax未定义”错误。我怎样才能解决这个问题？以下是我的html代码：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div id="main" class="container">
<p>\(A \cup B\)</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function () {
$("#main").append("<p>\\(A \\cup B\\)</p>");
MathJax.typeset();
})
</script>
</body>
</html>
通过在
很可能你的文档已经准备好了，所以你的浏览器在完成加载库之前执行调用MathJax.typeset（）；，导致这个未知的引用错误。
您可以删除async属性，强制浏览器先加载库，然后执行其余脚本。
或者您可以使用defer属性异步加载脚本，并确保脚本以正确的顺序执行（它们相互依赖）。
您可能感兴趣的相关主题：
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-异步
脚本标记-异步
