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++)

• Вы должны использовать функцию debounce. Таким образом, вы запускаете цикл только один раз в определенное время или каждую клавиатуру или изменение. Проверьте функцию дребезга этого Дэвида Уолша: 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); 
      }; 
  }; 
  

Таким образом, ваш цикл не будет выполняться, если уже существует другой цикл выполнения, который я думаю, это то, истощает вашу производительность.

Cheers!