2d:null 2e:["$","title",null,{"children":"Throttling Function Calls | Fabian Iwand | Observable"}] 33:[] 31:{"id":"0ee63a713a7cf23a","slug":"throttle","title":"Throttling Function Calls","thumbnail":"3e54d0a1392d03ca382da8f78876433e98159c65fa432aba92bca4184d0d9fa5","access_level":"public","create_time":"$D2022-10-26T08:54:54.053Z","update_time":"$D2022-11-02T19:57:06.169Z","view_time":null,"first_public_time":"$D2022-10-26T08:57:59.532Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":126,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"titling":"auto","title":"Throttling Function Calls","cells":[{"id":0,"value":"# Throttling Function Calls\n\nA simple example on how to throttle function calls.\n\n~~~js\nimport {createThrottle} from \"@mootari/throttle\"\n~~~\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"function createThrottle(delay, {invalidation: invalidated = invalidation} = {}) {\n const delayed = () => new Promise(resolve => setTimeout(resolve, delay));\n const rejected = invalidated.then(() => Promise.reject('Invalidated'));\n let next = Promise.resolve();\n return (fn) => {\n const ret = Promise.race([rejected, next]).then(fn);\n next = next.then(delayed);\n return ret;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---\n## Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"Try to queue several calls, then invalidate the `throttle` cell by changing the delay. Notice how `manually_triggered_calls` no longer increases because we rejected all queued promises in `createThrottle()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"viewof delay = Inputs.range([0, 3000], {step: 250, value: 500, label: htl.html`Minimum delay`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"throttle = createThrottle(delay, {invalidation})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"manual = {\n let queued = 0;\n const out = htl.html``;\n const update = () => out.value = `${queued} calls queued`;\n const queue = (n = 1) => { for(let i = 0; i < n; i++) queued++, throttle(dec), update() };\n const dec = () => {\n queued--;\n update();\n mutable manually_triggered_calls = mutable manually_triggered_calls + 1;\n };\n update();\n return htl.html`

\n \n \n ${out}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"\nmutable manually_triggered_calls = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"a = {\n let n = 0;\n while(true) yield await throttle(() => n++);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"b = {\n let n = 0;\n while(true) yield await throttle(() => n++);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"---\n\n*Thumbnail image by [Sergi Ferrete](https://unsplash.com/@sergiferrete) via [unsplash.com](https://unsplash.com/photos/YXwt-vJ3szA)*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 32:"$31:body"