JavaScript：如何處理增長數組中的內存？

我有一個相當簡單的函數，它在每個keyup上觸發。它在一定條件下（T句子很長）標記TinyMCE的輸入文本，然後在TinyMCE編輯器中顯示突出顯示的文本。JavaScript：如何處理增長數組中的內存？

這看起來就像一個魅力乍一看。但隨着文本的增長，數組的功能需要越來越長的時間來執行。

是否有一種很棒的方式來檢測輸入光標在文本中的位置，然後僅分析周圍的單詞（可能是當前句子的示例）並重用其餘的文本？

代碼如下所示。

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); 
}

如何在這個提高速度的任何建議，歡迎:)

來源

2016-11-29 Mark Buskbjerg

我可以看到一個問題你的代碼。每次寫下單個字母時，有一個onchange和一個onkeyup函數會觸發兩次回調。有一些事情你可以嘗試：「」

如果你只是分成句子，你爲什麼不等到寫下來然後觸發你的循環？
如果使用長度緩存創建一個循環，該循環應該會更快，但是如果該數組很長，這應該會更高效。 for (var i = 0, len = sentenceArray.length; i < len; i++)

您應該使用去抖功能。通過這種方式，您可以在規定的時間或每個鍵入或更改中僅觸發一次循環。勾選此大衛·沃爾什的防抖動功能：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); 
    }; 
};

這樣，如果已經有另一個循環執行，我認爲這是對的事情正在耗盡你的表現你的循環將不會執行。

乾杯！

來源

2016-11-29 09:55:32 Jorge

不錯。花了我一段時間來弄清楚這個debouncer是如何工作的。但現在它像一個魅力:)更流暢。我不想只在（。！？等等）上運行，因爲人們經常停止在句子中間輸入。我想盡快驗證文本:)去抖器是以高效方式達到此目的的完美方式。 –

稍微澄清一下@Jorge 當我使用debouncer功能時，我的Chrome檢查工具會在我嘗試檢查時不停地停頓。我是以錯誤的方式使用它還是這是可以預料的？ –

JavaScript：如何處理增長數組中的內存？

回答

相關問題