diff options
| -rw-r--r-- | src/App.vue | 27 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 48 |
2 files changed, 57 insertions, 18 deletions
diff --git a/src/App.vue b/src/App.vue index a27cc08..0801124 100644 --- a/src/App.vue +++ b/src/App.vue @@ -127,7 +127,8 @@ export default defineComponent({ // For layout and resize-handling mainAreaDims: [0, 0] as [number, number], tileAreaDims: [0, 0] as [number, number], - pendingResizeHdlr: 0, // Set to a setTimeout() value + lastResizeHdlrTime: 0, // Used to throttle resize handling + pendingResizeHdlr: 0, // Set via setTimeout() for a non-initial resize event // Other justInitialised: false, excessTolNodeThreshold: 1000, // Threshold where excess tolMap entries are removed (done on tile collapse) @@ -590,14 +591,28 @@ export default defineComponent({ }, // For other events onResize(){ + // Handle event, delaying/ignoring if this was recently done if (this.pendingResizeHdlr == 0){ - this.pendingResizeHdlr = setTimeout(() => { + const resizeDelay = 100; + let handleResize = () => { this.uiOpts.scrollGap = getScrollBarWidth(); - this.updateAreaDims().then(() => { - this.relayoutWithCollapse(); - this.pendingResizeHdlr = 0; + return this.updateAreaDims().then(() => this.relayoutWithCollapse()); + }; + let currentTime = new Date().getTime(); + if (currentTime - this.lastResizeHdlrTime > resizeDelay){ + this.lastResizeHdlrTime = currentTime; + handleResize().then(() => { + this.lastResizeHdlrTime = new Date().getTime(); }); - }, 100); + } else { + let remainingDelay = resizeDelay - (currentTime - this.lastResizeHdlrTime); + this.pendingResizeHdlr = setTimeout(() => { + this.pendingResizeHdlr = 0; + handleResize().then(() => { + this.lastResizeHdlrTime = new Date().getTime(); + }); + }, remainingDelay); + } } }, onKeyUp(evt: KeyboardEvent){ diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index e5e8596..9ea10c8 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -15,8 +15,9 @@ export default defineComponent({ searchSuggs: [] as SearchSugg[], searchHasMoreSuggs: false, focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys - pendingSuggReq: 0, // Set via setTimeout() upon a search-suggestion request + lastSuggReqTime: 0, // Set when a search-suggestions request is initiated pendingSuggReqUrl: '', // Used by a pendingSuggReq callback to use the latest user input + pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request }; }, props: { @@ -90,26 +91,49 @@ export default defineComponent({ this.focusedSuggIdx = null; return; } - // Ask server for search-suggestions + // Get URL to use for querying search-suggestions let url = new URL(window.location.href); url.pathname = '/data/search'; url.search = '?name=' + encodeURIComponent(input.value); url.search += (this.uiOpts.useReducedTree ? '&tree=reduced' : ''); + // Query server, delaying/ignoring if a request was recently sent this.pendingSuggReqUrl = url.toString(); - if (this.pendingSuggReq != 0){ - return; - } - this.pendingSuggReq = setTimeout(() => - fetch(this.pendingSuggReqUrl) - .then(response => response.json()) + let doReq = () => { + return fetch(this.pendingSuggReqUrl) + .then(response => { + if (!response.ok){ + throw new Error('Server response not OK') + } + return response.json() + }) .then((results: SearchSuggResponse) => { this.searchSuggs = results[0]; this.searchHasMoreSuggs = results[1]; this.focusedSuggIdx = null; - this.pendingSuggReq = 0; - }), - 200 - ); + }) + .catch(error => { + console.error('Error encountered during fetch operation', error); + }); + }; + let currentTime = new Date().getTime(); + if (this.lastSuggReqTime == 0){ + this.lastSuggReqTime = currentTime; + doReq().finally(() => { + if (this.lastSuggReqTime == currentTime){ + this.lastSuggReqTime = 0; + } + }); + } else if (this.pendingDelayedSuggReq == 0){ + this.lastSuggReqTime = currentTime; + this.pendingDelayedSuggReq = setTimeout(() => { + this.pendingDelayedSuggReq = 0; + doReq().finally(() => { + if (this.lastSuggReqTime == currentTime){ + this.lastSuggReqTime = 0; + } + }); + }, 300); + } }, onDownKey(){ // Select next search-suggestion, if any |