mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-04 18:53:26 +08:00
added throttle debounce library
This commit is contained in:
parent
a00e8d1d88
commit
038d7b3717
5 changed files with 41 additions and 33 deletions
27
frontend/package-lock.json
generated
27
frontend/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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> {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
}
|
Loading…
Reference in a new issue