JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
var DebouncedTest = React.createClass({
componentWillMount: function() {
this.logging = debounce(this.logging);
},
componentDidMount: function() {
this.logging();
this.logging();
this.logging();
this.logging();
this.logging();
},
logging: function() {
console.debug("debouncedLogging");
},
render: function() {
return <div>Hello</div>;
}
});
var DebouncedTestMulti = React.createClass({
render: function() {
return (
<div>
<DebouncedTest/>
<DebouncedTest/>
<DebouncedTest/>
</div>
);
},
});
React.render(<DebouncedTestMulti/>, document.body);
// http://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};