andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 1649

Browse Source
This commit is contained in:
30secondsofcode
2018-02-12 07:22:00 +00:00
parent a024f6fa3c
commit d50f7e3fb0
2 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -3822,20 +3822,17 @@ curry(Math.min, 3)(10)(50)(2); // 2
### debounce
Creates a debounced function that delays invoking the provided function until after `wait` milliseconds have elapsed since the last time the debounced function was invoked.
Creates a debounced function that delays invoking the provided function until at least `ms` milliseconds have elapsed since the last time it was invoked.
Use `setTimeout()` and `clearTimeout()` to debounce the given method, `fn`.
Use `Function.apply()` to apply the `this` context to the function and provide the necessary `arguments`.
Omit the second argument, `wait`, to set the timeout at a default of 0 ms.
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. Use `Function.apply()` to apply the `this` context to the function and provide the necessary arguments.
Omit the second argument, `ms`, to set the timeout at a default of 0 ms.
```js
const debounce = (fn, wait = 0) => {
let inDebounce;
return function() {
const context = this,
args = arguments;
clearTimeout(inDebounce);
inDebounce = setTimeout(() => fn.apply(context, args), wait);
const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
};
```
@ -3846,7 +3843,7 @@ const debounce = (fn, wait = 0) => {
```js
window.addEventListener(
'resize',
debounce(function(evt) {
debounce(() => {
console.log(window.innerWidth);
console.log(window.innerHeight);
}, 250)

14
docs/index.html
View File

@ -857,18 +857,16 @@ console<span class="token punctuation">.</span><span class="token function">log<
arity <span class="token operator">&lt;=</span> args<span class="token punctuation">.</span>length <span class="token operator">?</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">) :</span> curry<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> fn<span class="token punctuation">,</span> arity<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">);</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">curry</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>pow<span class="token punctuation">)(</span><span class="token number">2</span><span class="token punctuation">)(</span><span class="token number">10</span><span class="token punctuation">);</span> <span class="token comment">// 1024</span>
<span class="token function">curry</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span>min<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)(</span><span class="token number">10</span><span class="token punctuation">)(</span><span class="token number">50</span><span class="token punctuation">)(</span><span class="token number">2</span><span class="token punctuation">);</span> <span class="token comment">// 2</span>
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="debounce" class="section double-padded">debounce</h3><div class="section double-padded"><p>Creates a debounced function that delays invoking the provided function until after <code>wait</code> milliseconds have elapsed since the last time the debounced function was invoked.</p><p>Use <code>setTimeout()</code> and <code>clearTimeout()</code> to debounce the given method, <code>fn</code>. Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary <code>arguments</code>. Omit the second argument, <code>wait</code>, to set the timeout at a default of 0 ms.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">debounce</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> wait <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> inDebounce<span class="token punctuation">;</span>
<span class="token keyword">return function</span><span class="token punctuation">() {</span>
<span class="token keyword">const</span> context <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">,</span>
args <span class="token operator">=</span> arguments<span class="token punctuation">;</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>inDebounce<span class="token punctuation">);</span>
inDebounce <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(()</span> <span class="token operator">=></span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">),</span> wait<span class="token punctuation">);
</pre><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div><div class="card fluid"><h3 id="debounce" class="section double-padded">debounce</h3><div class="section double-padded"><p>Creates a debounced function that delays invoking the provided function until at least <code>ms</code> milliseconds have elapsed since the last time it was invoked.</p><p>Each time the debounced function is invoked, clear the current pending timeout with <code>clearTimeout()</code> and use <code>setTimeout()</code> to create a new timeout that delays invoking the function until at least <code>ms</code> milliseconds has elapsed. Use <code>Function.apply()</code> to apply the <code>this</code> context to the function and provide the necessary arguments. Omit the second argument, <code>ms</code>, to set the timeout at a default of 0 ms.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">debounce</span> <span class="token operator">=</span> <span class="token punctuation">(</span>fn<span class="token punctuation">,</span> ms <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> timeoutId<span class="token punctuation">;</span>
<span class="token keyword">return function</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">) {</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeoutId<span class="token punctuation">);</span>
timeoutId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(()</span> <span class="token operator">=></span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> args<span class="token punctuation">),</span> ms<span class="token punctuation">);
};
};</span>
</pre><label class="collapse">Show examples</label><pre class="language-js">window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
<span class="token string">'resize'</span><span class="token punctuation">,</span>
<span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">) {</span>
<span class="token function">debounce</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">);</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">);
},</span> <span class="token number">250</span><span class="token punctuation">)