Javascript 等待Jinja在执行脚本之前完全完成页面呈现

在执行某个脚本之前，是否可以等待插入完所有模板元素？我正在尝试在一个页面上使用渲染一些数学，该页面还包含一组模板块。但是，数学是在Jinja2渲染所有模板块之前渲染的，因此所述块中的任何数学都不会渲染

我可以设置一个超时时间，比如说5秒，然后执行渲染脚本（这是可行的），但我宁愿使用更优雅的解决方案。按照说明在

标记内使用

延迟

，不起任何作用，也不起任何作用

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>

---

好的，所以我得出结论，最好的选择是简单地等待模板通过Jinja2。要等多久？这取决于一页上有多少练习：

<!--  KaTeX (LaTeX math) -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" data-aplus>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"  onload="console.log('Hello, this is KaTeX!');" data-aplus></script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" data-aplus></script>

<script data-aplus>
  document.addEventListener("DOMContentLoaded", function() {

    const n_of_exercises = $(".exercise").length;
    // Using "let" here so that math would render also the first time a page is loaded
    const ms = 300;
    const render_time = n_of_exercises * ms;
    const minimum_render_time = 1200;

    if (render_time >= minimum_render_time) {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, render_time);

    } else {

      setTimeout(function() {
        renderMathInElement(document.body,{delimiters: [
          {left: "\\[", right: "\\]", display: true},
          {left: "\\(", right: "\\)", display: false}]}
        );
      }, minimum_render_time);

    };

    console.log("Number of .exercise divs:" + n_of_exercises);
    console.log("Render time:" + render_time);


  });
</script>

document.addEventListener（“DOMContentLoaded”，function（））{
const n_of_演习=$（“.exercise”）。长度；
//在这里使用“let”，以便math在第一次加载页面时也会呈现
常数ms=300；
const render_time=n_of_练习*ms；
常数最小渲染时间=1200；
如果（渲染时间>=最小渲染时间）{
setTimeout（函数（）{
RenderManElement（document.body，{分隔符：[
{左：“\\[”，右：“\\]”，显示：true}，
{左：\\（“，右：\\）”，显示：false}]}
);
}，渲染时间）；
}否则{
setTimeout（函数（）{
RenderManElement（document.body，{分隔符：[
{左：“\\[”，右：“\\]”，显示：true}，
{左：\\（“，右：\\）”，显示：false}]}
);
}，最短渲染时间）；
};
console.log（“练习div的数量：”+n次/u次练习）；
log（“渲染时间：+渲染时间”）；
});

---

事实证明，无论一页上有多少练习，事情发生都需要最少的时间。这就是为什么指定了

最短渲染时间的原因。这只是在这个特定的页面上测试的，所以将来可能需要将值移动一点。
顺序是：1。Jinja2渲染模板2。生成的文档从服务器发送到客户端（浏览器）3。客户端JavaScript开始运行——不管问题是什么，都需要在服务器端修复。你能发布复制问题的Jinja2模板代码吗？@ChrisG我已经编辑了我的问题，并添加了相关链接+我的模板版本导致了问题。当你观察到没有呈现所有数学块时，你是否发现任何控制台错误？一点也没有。关于
translate.js
发布的
onmozzullScreenChange
和
onmozzullxScreenError
的两个弃用警告。但是就像我说的，如果我至少等一秒钟（或者在包含大量元素的巨大页面上等十秒钟），似乎没有问题。你能在浏览器中查看源代码（Ctrl+U）并将其粘贴到pastebin或类似的东西上吗？您的问题的问题是，它实际上不包含复制问题的代码，这意味着无法对其进行调试。在Jinja2完成呈现模板之前，任何客户端JavaScript代码都不可能开始执行。这个答案充其量只是一个变通办法，并不能解决问题。