javascript - Ace 编辑器 + jQueryUI 选项卡杀死了我的浏览器

Question

我有以下问题:更改选项卡后我的浏览器 (Chrome) 没有响应。参见 fiddle here .我没有用其他浏览器进行测试，也没有必要这样做，因为 Chrome 是我的目标，让它工作。

我的目标是将编辑器放在第二个选项卡中，而不是第一个选项卡中。这是我使用的代码:

HTML:

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab without</a></li>
    <li><a href="#tab2">Tab with</a></li>
  </ul>
  <div id="tab1">

  </div>
  <div id="tab2">
    <textarea id="ta"></textarea>
  </div>
<div>

JavaScript:

$(function(){
  $("#tabs").tabs({
    activate: function(event,ui){
      if (ui.newPanel.attr("id") == "tab2") {
        setTimeout(function(){
          var editor = ace.edit("ta");
          editor.setTheme("ace/theme/twilight");
          editor.session.setMode("ace/mode/xml");
        },10);
      }
    }
  });
});

此行失败:var editor = ace.edit("ta");

在我将选项卡切换到第二个选项卡后，浏览器“卡住”并且在一分钟内将 RAM 填充到大约 2.5 GB 左右并且没有任何渲染。然后即使操作系统也非常慢，直到我中断进程。

在我的实现中，我只在第一次运行时执行此激活；在这里我排除了这一点以简化代码。

感谢您提供的任何帮助。

Answer 1

尝试使用div而不是textarea，ace网站上的事件你可以看到他们使用div