MathJax 正在复制我的方程式——为什么以及如何解决这个问题？答案

【问题标题】：MathJax is duplicating my equations -- why and how can I fix this?MathJax 正在复制我的方程式——为什么以及如何解决这个问题？
【发布时间】：2015-03-31 19:27:23
【问题描述】：

我有以下页面（css没用--省略）：

HTML：

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="UTF-8">
        <title>Command Line</title>
        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            extensions: ["http://cs.jsu.edu/mathjax-ext/contrib/forminput/forminput.js"],
            tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
            TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]}
        });
        </script>
        <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="!!IMPORTANT_JS!!.js"></script>
        <script src="theta.js"></script>
        <script src="cmd.js"></script>
        <link rel="STYLESHEET" type="text/css" href="styles.css">
    </head>
    <header>
        <h1 id="title">COMMAND LINE v.2.0</h1><span id="copy">&copy; 2015 ~ Conor O'Brien</span>
    </header>
    <body>
        <div id="subtitle">Now with $\LaTeX$!</div>
        <div id="out"></div>
        <h3 id="sQ"></h3>
    </body>
    <footer>
        <input type="text" id="cmd">
        <input type="color" id="col">
        <div id="left">&gt;&gt;</div>
    </footer>
</html>

JavaScript：

$( document ).ready(function(){
    window.t = false;
    $("#col").on("change",function(){
        var d = $q(this).value;
        $q("#out").innerHTML+="<p>Color: <span style=\"color: "+d+";\">"+d.toUpperCase()+", "+Color.hexToRgb(d).v+" - "+linkC("/color "+d,"Use")+"</span>.</p>";
    });
    $("#cmd")[0].addEventListener("keypress",function(e){
        if(e.key=="Enter"){
            submit();
        }
    });
    $("#out").html("Initializing...");
    window.init = function(){
        var d = [br(3)+
                "********* INITIALIZED *********",
                "* Welcome to the experimental *",
                "* JavaScript command line! It *",
                "* will execute exactly like a *",
                "* handheld calculator, having *",
                "* the capacity to execute the *",
                "*        user's inputs.       *",
                "*                             *",
                "* ~-~-~-~-~-~-~-~-~-~-~-~-~-~ *",
                "*                             *",
                "* Type 'help' for environment *",
                "*           commands.         *",
                "*******************************"+br(),
                "<hr>"],i=0;
        function x(d,i){
            $q("#out").innerHTML += (d[i++])||"";
            $q("#out").innerHTML += br();
            if(i<d.length){ setTimeout(x,20,d,i); } else {
                window.t = true;
            }
        }
        setTimeout(x,500,d,i);
    }
    init();
});

function br(x){
    var o = "",x=x||1;
    for(i=0;i<x;i++){
        o+="<br>";
    }
    return o;
}

function $q(i){
    return $(i)[0];
}

function submit(){
    if(t){
        var $out = getOutput();
        if($out){
            var d = "<p id='a"+(el++)+"'>"+$out+"</p>";
            $q("#out").innerHTML += d;
            lines.push(d);
            marker = lines.length;
            location = "file:///C:/Users/Conor%20O%27Brien/Documents/Programming/command%20line%20v.2.0/main.html#sQ";
            $q("#cmd").focus();
            console.log(el);
            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"a"+el+""]);
        }
    }
}

var pi = Math.PI;
var e  = Math.E;

function Reval(str){
    with(Math){var tstr = str.replace(/(.+)\^(.+)/g,"Math.pow($1,$2)");return eval(tstr);}
}

function Dval(str){
    return "$"+str.replace(/(.+)\^(.+)/g,"{$1}^{$2}")+"$";
}

var el = 0;

function getOutput(){
    var val = $q("#cmd").value;
    if(val=="help"){
        $q("#out").innerHTML = "";
        return "<h1>HELP</h1><h2>Commands</h2>"+
        [
            "= help",
            "  - displays help document.",
            "= open {target}",
            "  - displays {target}'s contents.",
            "  - {target} values:",
            "    * options: adjust options with subpoints (i.e. options.{prop} = {1/0} [1=True,0=False])"
        ].join(br())+"<hr>";
    } else if(val=="cls"||val=="clear"){
        $q("#out").innerHTML = "";
        return "Cleared.";
    } else if(val.substr(0,5)=="open "){
        var target = val.substr(5,val.length);
        console.log(target);
        switch(target){
            case "options":

            break;
            default:
                return new Error(target+" is not a valid target!");
            break;
        }
    } else {
        try {
            console.log(val,Reval(val));
            return Dval(val)+br()+"<span class='ans'>"+Reval(val)+"</span>";
        } catch(e) {
            return e;
        }
    }
}

执行后，这（理想情况下）将能够评估用户的输入（即sin(3) 或3 + 5^3 / 99.3）。这段代码成功地做到了这一点，尽管显示它比较棘手。我正在使用 MathJax 正确显示数学，并使用 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"a"+el+""]); 定位元素 a{number} 并重做其 MathJax。这以某种方式刷新了整个页面，此外，在输入几个条目后，将开始复制前面的方程。

我已将其范围缩小到我认为的解决方案：MathJax 有两个可观察的阶段。

它格式化方程，然后
它应用字体。

MathJax 函数似乎只在我的代码中执行这两个步骤两次：一次，在开始时，一次，在函数第一次执行时。

我的问题是，我该如何解决这个问题？我一直在尝试解决此问题，但无济于事。

【问题讨论】：

你试过清理浏览器缓存吗？几周前出现了一个问题，暂时导致版本混合，从而导致了这个特定问题。
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： javascript html mathjax

【解决方案1】：

您的方法存在几个问题。 MathJax 重新处理整个文档的原因是因为您如何在 submit() 函数中增加 el。您使用后增量el++，以便在该行之后

var d = "<p id='a"+(el++)+"'>"+$out+"</p>";

el 比您要添加的段落的 ID 大一。所以稍后当你这样做时

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"a"+el+""]);

你传递的ID并不是指新添加的<p>标签，实际上并没有这样的ID。当找不到 ID 时，MathJax 会处理整个页面。

至于数学的重复，那是因为你使用innerHTML来更新输出区域。这样做会破坏现有的 DOM 并用新的 DOM 替换它（一种非常低效的方法）。这样做时，您切断了 MathJax 与 DOM 中现有数学之间的连接，因此 MathJax 不知道数学已被处理。因此，当它重新处理页面时，它会尝试再次排版数学（尽管在这种情况下它只能创建预览，但这是您视为重复的数学）。

最好不要使用innerHTML 替换包含MathJax 输出的元素的内容。除了断开 MathJax 的输出之外，您还会丢失 MathJax 用于其上下文菜单和缩放功能之类的事件处理程序。最好使用像document.createElement() 和appendChild() 这样的显式DOM 操作命令。这些需要更多的工作，但效率会更高，尤其是对于较长的文档，并且不会导致 MathJax 问题。

MathJax 实际上为以这种方式创建元素提供了一些支持，因此您可以利用这些优势，而不是全部手动完成。

【讨论】：