From 32f4360de9a5d2654a338ecf590d8f5f5cae2fec Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Mon, 3 Jun 2024 10:49:34 +0200 Subject: [PATCH] Implement debouncing to optimize text error handling Previously, texts with numerous errors could cause performance issues due to the high frequency of function calls. With the new debouncing implementation, we effectively limit the rate at which the error handling function executes, thereby reducing potential lagginess and improving the overall user experience. --- service2.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/service2.js b/service2.js index 02f651b..87762b7 100644 --- a/service2.js +++ b/service2.js @@ -26,6 +26,7 @@ class BesService { this.hostElement = hostElement this.results = [] // Results of grammar-checking, one per each block/paragraph of text this.createCorrectionPanel() + this.firstCall = true // Disable browser built-in spell-checker to prevent collision with our grammar markup. this.originalSpellcheck = this.hostElement.spellcheck @@ -774,7 +775,16 @@ class BesDOMService extends BesTreeService { */ onInput() { // Now that the text is done changing, we can correctly calculate markup position. - this.repositionAllMarkup() + // This is a way to resolve lagginess in repositioning markup with many mistakes. + if (this.firstCall) { + this.repositionAllMarkup() + this.firstCall = false + } + clearTimeout(this.debounceTimer) + this.debounceTimer = setTimeout(() => { + this.repositionAllMarkup() + this.firstCall = true + }, 300) // Defer grammar-checking to reduce stress on grammar-checking server. this.timer = setTimeout(() => {