feat: menu save debounce

src/features/menu/menu_old.css

@@ -46,6 +46,7 @@
 }
 
 .betterytm-menu-link {
+  cursor: pointer;
   display: inline-block;
 }
 

src/features/menu/menu_old.ts

@@ -2,7 +2,7 @@ import { defaultFeatures, getFeatures, saveFeatureConf, setDefaultFeatConf } fro
 import { scriptInfo } from "../../constants";
 import { featInfo } from "../index";
 import { FeatureConfig } from "../../types";
-import { getAssetUrl, info, log } from "../../utils";
+import { debounce, getAssetUrl, info, log } from "../../utils";
 import "./menu_old.css";
 
 //#MARKER create menu elements
@@ -47,6 +47,7 @@ export async function addMenu() {
 
   const titleElem = document.createElement("h2");
   titleElem.id = "betterytm-menu-title";
+  titleElem.classList.add("bytm-no-select");
   titleElem.innerText = `${scriptInfo.name} - Configuration`;
 
   const linksCont = document.createElement("div");
@@ -62,7 +63,7 @@ export async function addMenu() {
     anchorElem.style.marginLeft = "10px";
         
     const imgElem = document.createElement("img");
-    imgElem.className = "betterytm-menu-img";
+    imgElem.className = "betterytm-menu-img bytm-no-select";
     imgElem.src = imgSrc;
     imgElem.style.width = "32px";
     imgElem.style.height = "32px";
@@ -97,7 +98,7 @@ export async function addMenu() {
   featuresCont.style.overflowY = "auto";
 
   /** Gets called whenever the feature config is changed */
-  const confChanged = async (key: keyof typeof defaultFeatures, initialVal: number | boolean | Record<string, unknown>, newVal: number | boolean | Record<string, unknown>) => {
+  const confChanged = debounce(async (key: keyof typeof defaultFeatures, initialVal: number | boolean | Record<string, unknown>, newVal: number | boolean | Record<string, unknown>) => {
     const fmt = (val: unknown) => typeof val === "object" ? JSON.stringify(val) : String(val);
     info(`Feature config changed, key '${key}' from value '${fmt(initialVal)}' to '${fmt(newVal)}'`);
 
@@ -108,7 +109,7 @@ export async function addMenu() {
     await saveFeatureConf(featConf);
 
     log("Saved feature config changes:\n", await GM.getValue("betterytm-config"));
-  };
+  });
 
   const features = await getFeatures();
 

src/utils.ts

@@ -387,3 +387,15 @@ export function pauseFor(time: number) {
     setTimeout(res, time);
   });
 }
+
+/**
+ * Calls the passed `func` after the specified `timeout` in ms.  
+ * Any subsequent calls to this function will reset the timer and discard previous calls.
+ */
+export function debounce<TFunc extends (...args: TArgs[]) => void, TArgs = any>(func: TFunc, timeout = 300) { // eslint-disable-line @typescript-eslint/no-explicit-any
+  let timer: NodeJS.Timer | undefined;
+  return function(...args: TArgs[]) {
+    clearTimeout(timer);
+    timer = setTimeout(() => func.apply(this, args), timeout);
+  };
+}