JavaScript：如何处理不断增长的数组中的内存？

Question

我有一个相当简单的函数，它会在每次按键时触发。它的作用是在特定条件下（句子很长）标记来自 TinyMCE 的输入文本，然后在 TinyMCE 编辑器中显示突出显示的文本。

乍一看，这就像一个魅力。但是随着文本的增长，数组的执行时间越来越长。

是否有一种绝妙的方法来检测输入光标在文本中的位置，然后只分析周围的单词（例如可能是当前句子）并重用文本的其余部分?

代码是这样的。

HTML

<div id="myTextArea" contenteditable="true">
Just put lorem ipsum here.
</div>

JavaScript (jQuery)

tinymce.init({
  selector: '#myTextArea',
  height: 300,
  setup: function(ed) {
    ed.on('change', myCustomInitInstance);
    ed.on('keyup', myCustomInitInstance);
    ed.on('paste', myCustomInitInstance);
    ed.on('cut', myCustomInitInstance);
  },
  init_instance_callback: "myCustomInitInstance",
  });

function myCustomInitInstance(inst) {
  var rawText = tinyMCE.get('myTextArea').getContent({
    format: 'text'
  });


var sentenceArray = rawText.split(".");
  var matchWarning = [];
  var longSentence = 16;
  var words;
  var wordCounter;
  var output;

  for (var i in sentenceArray) {
    words = sentenceArray[i].split(" ");
    wordCounter = words.length;
    if (wordCounter > longSentence) {
      matchWarning.push(sentenceArray[i]);
    }
  }

  var editor = tinyMCE.activeEditor;
  // Store the selection
  var bookmark = editor.selection.getBookmark();

  // Remove previous marks and add new ones
  $(editor.getBody()).unmark().mark(matchWarning, {
    acrossElements: true,
    "separateWordSearch": false,
  });

  // Restore the selection
  editor.selection.moveToBookmark(bookmark);
}

欢迎任何关于如何提高速度的建议:)

Answer 1

我发现您的代码存在一个问题。每次写下一个字母时，拥有onchange 和onkeyup 函数都会触发两次回调。 您可以尝试以下几种方法：

• 如果您只是拆分成句子，为什么不等到一个“。”被写下来然后触发你的循环？
• 如果您使用长度缓存创建一个循环应该会更快，但如果数组很长，这应该会更高效。 for (var i = 0, len = sentenceArray.length; i < len; i++)

• 您应该使用去抖动功能。这样，您在定义的时间或每次按键或更改时仅触发一次循环。检查这个 David Walsh 的去抖动功能：https://davidwalsh.name/javascript-debounce-function

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  function debounce(func, wait, immediate) {
      var timeout;
      return function() {
          var context = this, args = arguments;
          var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };
  

如果已经有另一个循环正在执行，那么你的循环将不会执行，我认为这会消耗你的性能。

干杯！