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の機能を使用すると、1文字を書き留めるたびにコールバックが2回トリガーされます。 あなたが試みることができるいくつかのことがあります：「」

• をあなただけの文章に分割されている場合は、なぜあなたがするまで待っていませんで書き留めてループをトリガーしますか？
• 長さキャッシングでループを作成するとループが速くなるはずですが、配列が非常に長い場合は、これがより効果的です。 for (var i = 0, len = sentenceArray.length; i < len; i++)

• デバウンス機能を使用する必要があります。このようにして、定義された時間内またはすべてのキーアップまたは変更でループを1回だけトリガーします。このデビッド・ウォルシュのデバウンス機能をチェックしてください：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); 
      }; 
  }; 
  

私は事は、あなたのパフォーマンスを排出されていると思う実行する別のループは、すでに存在する場合、あなたのループは実行されませんこの方法です。

乾杯！