diff --git a/snippets/promiseDebounce.md b/snippets/debouncePromise.md similarity index 55% rename from snippets/promiseDebounce.md rename to snippets/debouncePromise.md index 56e7058f8..4fd9401ca 100644 --- a/snippets/promiseDebounce.md +++ b/snippets/debouncePromise.md @@ -1,49 +1,48 @@ --- -title: promiseDebounce -tags: promise,debounce,intermediate +title: debouncePromise +tags: function,promise,advanced --- -Creates a debounced function that returns a promise, but delays invoking the provided function until at least `ms` milliseconds have elapsed since the last time it was invoked. All promises returned during this time will return the same data. +Creates a debounced function that returns a promise, but delays invoking the provided function until at least `ms` milliseconds have elapsed since the last time it was invoked. +All promises returned during this time will return the same data. - Each time the debounced function is invoked, clear the current pending timeout with `clearTimeout()` and use `setTimeout()` to create a new timeout that delays invoking the function until at least `ms` milliseconds has elapsed. -- create a new `Promise` and add it's `resolve` and `reject` callback to pending promises stack. -- When `setTimeout` is called: copy current stack (as it can change between provided function call and resolve), clear it and call provided function. -- When provided function resolves/rejects, finish all promises from stack (copied when function was called) with returned data. - Use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments. +- Create a new `Promise` and add its `resolve` and `reject` callbacks to the `pending` promises stack. +- When `setTimeout` is called, copy the current stack (as it can change between the provided function call and its resolution), clear it and call the provided function. +- When the provided function resolves/rejects, resolve/reject all promises in the stack (copied when the function was called) with the returned data. - Omit the second argument, `ms`, to set the timeout at a default of 0 ms. ```js -const promiseDebounce = (fn, ms = 0) => - { - let timeoutId; - const pending = []; - - return (...args) => new Promise((res, rej) => { +const debouncePromise = (fn, ms = 0) => { + let timeoutId; + const pending = []; + return (...args) => + new Promise((res, rej) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { const currentPending = [...pending]; - pending.lenght = 0; + pending.length = 0; Promise.resolve(fn.apply(this, args)).then( data => { currentPending.forEach(({ resolve }) => resolve(data)); }, error => { currentPending.forEach(({ reject }) => reject(error)); - }, - ) + } + ); }, ms); pending.push({ resolve: res, reject: rej }); }); - } +}; ``` ```js -//some function returning promise const fn = arg => new Promise(resolve => { - setTimeout(resolve, 1000, ['resolved', arg]); + setTimeout(resolve, 1000, ['resolved', arg]); }); -const debounced = promiseDebounce(fn, 200); +const debounced = debouncePromise(fn, 200); debounced('foo').then(console.log); debounced('bar').then(console.log); -// will log ['resolved', 'bar'] both times. +// Will log ['resolved', 'bar'] both times ```