added throttle debounce library

This commit is contained in:
Miodec 2022-04-07 00:58:58 +02:00
parent a00e8d1d88
commit 038d7b3717
5 changed files with 41 additions and 33 deletions

View file

@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "GPL-3.0",
"dependencies": {
"@types/throttle-debounce": "2.1.0",
"axios": "^0.21.2",
"chart.js": "3.7.1",
"chartjs-adapter-date-fns": "2.0.0",
@ -22,7 +23,8 @@
"html2canvas": "1.4.1",
"object-hash": "3.0.0",
"remove-files-webpack-plugin": "1.5.0",
"stemmer": "2.0.0"
"stemmer": "2.0.0",
"throttle-debounce": "3.0.1"
},
"devDependencies": {
"@types/chartjs-plugin-trendline": "1.0.1",
@ -1173,6 +1175,11 @@
"@types/node": "*"
}
},
"node_modules/@types/throttle-debounce": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
"integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
},
"node_modules/@types/tinycolor2": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
@ -12184,6 +12191,14 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
"node_modules/throttle-debounce": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
"engines": {
"node": ">=10"
}
},
"node_modules/through2-filter": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
@ -14763,6 +14778,11 @@
"@types/node": "*"
}
},
"@types/throttle-debounce": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
"integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
},
"@types/tinycolor2": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.3.tgz",
@ -23264,6 +23284,11 @@
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
"dev": true
},
"throttle-debounce": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
},
"through2-filter": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",

View file

@ -50,6 +50,7 @@
"webpack-merge": "5.8.0"
},
"dependencies": {
"@types/throttle-debounce": "2.1.0",
"axios": "^0.21.2",
"chart.js": "3.7.1",
"chartjs-adapter-date-fns": "2.0.0",
@ -63,6 +64,7 @@
"html2canvas": "1.4.1",
"object-hash": "3.0.0",
"remove-files-webpack-plugin": "1.5.0",
"stemmer": "2.0.0"
"stemmer": "2.0.0",
"throttle-debounce": "3.0.1"
}
}

View file

@ -10,6 +10,7 @@ import * as ConfigEvent from "./observables/config-event";
import DefaultConfig from "./constants/default-config";
import { Auth } from "./firebase";
import * as AnalyticsController from "./controllers/analytics-controller";
import { debounce } from "throttle-debounce";
export let localStorageConfig: MonkeyTypes.Config;
export let dbConfigLoaded = false;
@ -33,6 +34,13 @@ let config = {
...DefaultConfig,
};
let configToSend = {} as MonkeyTypes.Config;
const saveToDatabase = debounce(1000, () => {
delete configToSend.resultFilters;
if (Object.keys(configToSend).length > 0) DB.saveConfig(configToSend);
configToSend = {} as MonkeyTypes.Config;
});
async function saveToLocalStorage(
key: keyof MonkeyTypes.Config,
nosave = false,
@ -50,31 +58,12 @@ async function saveToLocalStorage(
const localToSaveStringified = JSON.stringify(localToSave);
window.localStorage.setItem("config", localToSaveStringified);
if (!noDbCheck) {
// await DB.saveConfig(dbToSave);
await saveToDatabase(key);
(configToSend[key] as typeof config[typeof key]) = config[key];
await saveToDatabase();
}
ConfigEvent.dispatch("saveToLocalStorage", localToSaveStringified);
}
let configToSend = {} as MonkeyTypes.Config;
let saveTimeout: NodeJS.Timeout | null = null;
async function saveToDatabase(key: keyof MonkeyTypes.Config): Promise<void> {
(configToSend[key] as typeof config[typeof key]) = config[key];
if (saveTimeout === null) {
saveTimeout = setTimeout(
async () => {
delete configToSend.resultFilters;
if (Object.keys(configToSend).length > 0) DB.saveConfig(configToSend);
configToSend = {} as MonkeyTypes.Config;
clearTimeout(saveTimeout as NodeJS.Timeout);
saveTimeout = null;
},
window.location.hostname === "localhost" ? 0 : 1000
);
}
}
export async function saveFullConfigToLocalStorage(
noDbCheck = false
): Promise<void> {

View file

@ -11,10 +11,10 @@ import {
SearchService,
TextExtractor,
} from "../utils/search-service";
import { debounce } from "../utils/debounce";
import { splitByAndKeep } from "../utils/strings";
import QuotesController from "../controllers/quotes-controller";
import { Auth } from "../firebase";
import { debounce } from "throttle-debounce";
export let selectedId = 1;
@ -258,7 +258,7 @@ export function apply(val: number): boolean {
return ret;
}
const searchForQuotes = debounce((): void => {
const searchForQuotes = debounce(250, (): void => {
const searchText = (<HTMLInputElement>document.getElementById("searchBox"))
.value;
updateResults(searchText);

View file

@ -1,8 +0,0 @@
export function debounce(fn: any, ms = 250): any {
let timeoutId: ReturnType<typeof setTimeout>;
return function (this: any, ...args: any[]) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
}