diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..48a2e24 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +components +build diff --git a/History.md b/History.md new file mode 100644 index 0000000..e69de29 diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..0f14dac --- /dev/null +++ b/Makefile @@ -0,0 +1,11 @@ + +build: components index.js + @component build --dev + +components: component.json + @component install --dev + +clean: + rm -fr build components template.js + +.PHONY: clean diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..ec693b8 --- /dev/null +++ b/Readme.md @@ -0,0 +1,34 @@ + +# debounce + + Underscore's debounce method as a component. + + Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. + +## Installation + + $ component install matthewmueller/debounce + +## Example + + ```js + var debounce = require('debounce'); + window.onresize = debounce(resize, 200); + + function resize(e) { + console.log('height', window.innerHeight); + console.log('width', window.innerWidth); + } + ``` + +## API + + ### debounce(fn, wait, [ immediate ]) + + Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on. + + Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time. + +## License + + MIT diff --git a/component.json b/component.json new file mode 100644 index 0000000..4f72cea --- /dev/null +++ b/component.json @@ -0,0 +1,13 @@ +{ + "name": "debounce", + "repo": "matthewmueller/debounce", + "description": "Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked", + "version": "0.0.1", + "keywords": [], + "dependencies": {}, + "development": {}, + "license": "MIT", + "scripts": [ + "index.js" + ] +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..4f833d9 --- /dev/null +++ b/index.js @@ -0,0 +1,29 @@ +/** + * Debounce + * + * Returns a function, that, as long as it continues to be invoked, will not + * be triggered. The function will be called after it stops being called for + * N milliseconds. If `immediate` is passed, trigger the function on the + * leading edge, instead of the trailing. + * + * @param {Function} func + * @param {Number} wait + * @param {Boolean} immediate + * @return {Function} + */ + +module.exports = function(func, wait, immediate) { + var timeout, result; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) result = func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) result = func.apply(context, args); + return result; + }; +}; diff --git a/test.html b/test.html new file mode 100644 index 0000000..754da51 --- /dev/null +++ b/test.html @@ -0,0 +1,18 @@ + + + Debounce Component + + + + + +