2014-05-10 36 views
1

我從其他來源「借」下面的代碼。據我所知,它基本上與 this MathJax演示頁面相同。我遇到的問題是我沒有看到我爲奇數按鍵輸入的結果。例如,當我鍵入第一個字符時,我在MathPreview div中看不到任何內容。但是,我看到輸入第二個字符後的前兩個字符。這種模式重複出現,就好像MathJax即使按下按鍵也會觸發,但它會在奇數按鍵關閉時關閉。任何想法爲什麼發生這種情況?在上面鏈接的演示頁面上不會發生這種情況。爲什麼MathJax在鍵入LaTeX時顯示爲開啓和關閉?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Mathematics</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <link rel="stylesheet" href="assets/css/styles.css"> 
    <script src="bower_components/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
    <script> 
     var Preview = { 
      delay: 150,  // delay after keystroke before updating 
      preview: null,  // filled in by Init below 
      buffer: null,  // filled in by Init below 
      timeout: null,  // store setTimeout id 
      mjRunning: false, // true when MathJax is processing 
      oldText: null,  // used to check if an update is needed 

      // Get the preview and buffer DIV's 
      Init: function() { 
       this.preview = document.getElementById("MathPreview"); 
       this.buffer = document.getElementById("MathBuffer"); 
      }, 

      // Switch the buffer and preview, and display the right one. 
      // (We use visibility:hidden rather than display:none since 
      // the results of running MathJax are more accurate that way.) 
      SwapBuffers: function() { 
       var buffer = this.preview, preview = this.buffer; 
       this.buffer = buffer; this.preview = preview; 
       buffer.style.visibility = "hidden"; buffer.style.position = "absolute"; 
       preview.style.position = ""; preview.style.visibility = ""; 
      }, 

      // This gets called when a key is pressed in the textarea. 
      // We check if there is already a pending update and clear it if so. 
      // Then set up an update to occur after a small delay (so if more keys 
      // are pressed, the update won't occur until after there has been 
      // a pause in the typing). 
      // The callback function is set up below, after the Preview object is set up. 
      Update: function() { 
       if (this.timeout) {clearTimeout(this.timeout)} 
       this.timeout = setTimeout(this.callback,this.delay); 
      }, 

      // Creates the preview and runs MathJax on it. 
      // If MathJax is already trying to render the code, return 
      // If the text hasn't changed, return 
      // Otherwise, indicate that MathJax is running, and start the 
      // typesetting. After it is done, call PreviewDone. 
      CreatePreview: function() { 
       Preview.timeout = null; 
       if (this.mjRunning) return; 
       var text = document.getElementById("MathInput").value; 
       if (text === this.oldtext) return; 
       this.buffer.innerHTML = this.oldtext = text; 
       this.mjRunning = true; 
       MathJax.Hub.Queue(
         ["Typeset",MathJax.Hub,this.buffer], 
         ["PreviewDone",this] 
       ); 
      }, 

      // Indicate that MathJax is no longer running, 
      // and swap the buffers to show the results. 
      PreviewDone: function() { 
       this.mjRunning = false; 
       this.SwapBuffers(); 
      } 
     }; 

     // Cache a callback to the CreatePreview action 
     Preview.callback = MathJax.Callback(["CreatePreview",Preview]); 
     Preview.callback.autoReset = true; // make sure it can run more than once 
    </script> 

    <script type="text/x-mathjax-config;executed=true"> 
     MathJax.Hub.Config({ 
      showProcessingMessages: false, 
      tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] } 
     }); 
    </script> 

</head> 
<body> 
    <div class="content"> 
     <div id="MathJax_Message" style="display: none;"></div> 
     <div class="left_half_page"> 
      <div class="content"> 
       <div class="fill_with_padding"> 
        <textarea class="content no_border" id="MathInput" onkeyup="Preview.Update()"></textarea> 
       </div> 
      </div> 
     </div> 
     <div class="right_half_page"> 
      <div class="content"> 
       <div class="fill_with_padding"> 
        <div id="MathPreview" class="content"> 
         <div id="MathBuffer"> 
          <div> 
           <script>Preview.Init();</script> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

回答

4

問題是MathBuffer和MathPreview是嵌套的。他們應該是兄弟姐妹。該代碼使用雙緩衝技術,顯示一個緩衝區,而另一個正在排版,然後切換兩者。顯示一個而另一個隱藏。如果一個人在另一個人的內部,則只能看到每隔一個按鍵的結果。

此外,請注意緩衝區的內容被替換爲輸入,因此當您替換MathPreview緩衝區時,將刪除MathBuffer及其包含的腳本。請注意,在您鏈接到的MathJax頁面中,兩個div(MathPreview和MathBuffer)不是嵌套的,初始化腳本出現在兩者之後(不嵌套在它們中)。

如果你修復了嵌套問題,我認爲它會爲你工作。

+0

就是這樣!謝謝! –

相關問題