diff --git a/Client-Side Components/UX Client Script Include/Reusable Debounce/DebounceUtil.js b/Client-Side Components/UX Client Script Include/Reusable Debounce/DebounceUtil.js new file mode 100644 index 0000000000..508f2fc7c5 --- /dev/null +++ b/Client-Side Components/UX Client Script Include/Reusable Debounce/DebounceUtil.js @@ -0,0 +1,18 @@ +function include() { + class DebounceUtil { + + /** + * @param callbackFunc - callback function following timeout + * @param timeout - debounce timeout + * @param helpers - the helpers object passed from a UX Client Script + */ + static debounce(callbackFunc, timeout = 750, helpers) { + let timer; + return (...args) => { + helpers.timing.clearTimeout(timer); // Clear anything currently in place + timer = helpers.timing.setTimeout(() => { callbackFunc.apply(this, args); }, timeout); + }; + } + } + return DebounceUtil; +} diff --git a/Client-Side Components/UX Client Script Include/Reusable Debounce/README.md b/Client-Side Components/UX Client Script Include/Reusable Debounce/README.md new file mode 100644 index 0000000000..1549034179 --- /dev/null +++ b/Client-Side Components/UX Client Script Include/Reusable Debounce/README.md @@ -0,0 +1,32 @@ +## Add a debounce to search fields or other inputs with a client script +Inputs, Typeaheads, and other components that can be used for searching the database, caches, or local storage. However, performing a search for every keypress or other change is often unnecessary and uses more resources than strictly necessary. This UX Client Script Include is a small utility for managing debounces, allowing a 'cool-off' from inputs before performing the activity. + +### Steps +1. Create a new UX Client Script Include (`sys_ux_client_script_include`), using the script from the associated snippet +2. Create a new Client Script in UI Builder, and add the include you created in 1 as a dependency +3. Within the Client Script, import the Script Include as follows, replacing `global.DebounceUtilName` with the scope and UX Client Script Include name: + ```js + const DebounceUtil = imports["global.DebounceUtilName"](); + ``` +4. Within the Client Script, declare a `function` to be called inside the debounce function + +### Example usage +```js +/** +* @param {params} params +* @param {api} params.api +* @param {any} params.event +* @param {any} params.imports +* @param {ApiHelpers} params.helpers +*/ +function handler({api, event, helpers, imports}) { + const DebounceUtil = imports["global.DebounceUtil"](); + var debounceSearch = DebounceUtil.debounce(takeAction, 500, helpers); + debounceSearch(); + + function takeAction(){ + const searchTerm = event.payload.value; + api.setState('fullRefQuery',`nameLIKE${searchTerm}`); + } +} +```