Edit Throttling

Name

Also known as (comma separated)

Brief definition Limit execution frequency.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "intervalMs", "type": "number", "label": "Throttle interval (ms)", "default": 500, "min": 100, "max": 2000, "step": 100 }, { "id": "buttonLabel", "type": "text", "label": "Trigger label", "default": "Click rapidly" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showInterval", "type": "toggle", "label": "Show configured interval", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"thr\" data-interval=\"{{intervalMs}}\">\n <button type=\"button\" class=\"thr__btn\" style=\"background:{{accent}};\">{{buttonLabel}}</button>\n {{#if showInterval}}<p class=\"thr__interval\">Handler runs at most once every {{intervalMs}}ms</p>{{/if}}\n <p class=\"thr__status\" role=\"status\">clicks: 0 &nbsp; handler ran: 0</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".thr\");\n if (!el) return;\n var interval = Number(el.dataset.interval);\n var btn = el.querySelector(\".thr__btn\");\n var status = el.querySelector(\".thr__status\");\n var clicks = 0, ran = 0, last = 0;\n btn.addEventListener(\"click\", function () {\n clicks++;\n var now = Date.now();\n if (now - last >= interval) {\n last = now;\n ran++;\n }\n status.textContent = \"clicks: \" + clicks + \" handler ran: \" + ran;\n });\n})();</script>\n<style>\n.thr { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.thr__btn { display: block; width: 100%; border: none; padding: 12px; border-radius: 8px; font: 600 13px system-ui, sans-serif; color: #241430; cursor: pointer; margin-bottom: 8px; }\n.thr__interval { margin: 0 0 8px; font-size: 10px; color: #24143099; }\n.thr__status { margin: 0; font-size: 12px; font-weight: 600; }\n</style>", "tailwind": "<div class=\"thrtw font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\" data-interval=\"{{intervalMs}}\">\n <button type=\"button\" class=\"thrtw__btn block w-full border-none py-3 rounded-lg font-semibold text-[13px] text-[#241430] cursor-pointer mb-2\" style=\"background:{{accent}};\">{{buttonLabel}}</button>\n {{#if showInterval}}<p class=\"m-0 mb-2 text-[10px] text-[#24143099]\">Handler runs at most once every {{intervalMs}}ms</p>{{/if}}\n <p class=\"thrtw__status m-0 text-xs font-semibold\" role=\"status\">clicks: 0 &nbsp; handler ran: 0</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".thrtw\");\n if (!el) return;\n var interval = Number(el.dataset.interval);\n var btn = el.querySelector(\".thrtw__btn\");\n var status = el.querySelector(\".thrtw__status\");\n var clicks = 0, ran = 0, last = 0;\n btn.addEventListener(\"click\", function () {\n clicks++;\n var now = Date.now();\n if (now - last >= interval) {\n last = now;\n ran++;\n }\n status.textContent = \"clicks: \" + clicks + \" handler ran: \" + ran;\n });\n})();</script>", "react": "import { useRef, useState } from \"react\";\n\nexport function Throttling({\n intervalMs = {{intervalMs}},\n buttonLabel = \"{{buttonLabel}}\",\n accent = \"{{accent}}\",\n showInterval = {{showInterval}},\n}) {\n const [clicks, setClicks] = useState(0);\n const [ran, setRan] = useState(0);\n const last = useRef(0);\n const onClick = () => {\n setClicks((c) => c + 1);\n const now = Date.now();\n if (now - last.current >= intervalMs) {\n last.current = now;\n setRan((r) => r + 1);\n }\n };\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <button type=\"button\" onClick={onClick} style={{ display: \"block\", width: \"100%\", border: \"none\", padding: 12, borderRadius: 8, fontWeight: 600, fontSize: 13, color: \"#241430\", cursor: \"pointer\", marginBottom: 8, background: accent }}>{buttonLabel}</button>\n {showInterval && <p style={{ margin: \"0 0 8px\", fontSize: 10, color: \"#24143099\" }}>Handler runs at most once every {intervalMs}ms</p>}\n <p role=\"status\" style={{ margin: 0, fontSize: 12, fontWeight: 600 }}>clicks: {clicks} &nbsp; handler ran: {ran}</p>\n </div>\n );\n}" }