public
Created

  • Download Gist
throttling1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<!DOCTYPE html>
<head>
<title>Rx for JavaScript Rocks!</title>
<script type="text/javascript">
 
function throttleInput (element, onNext) {
var delay = function (action) {
return window.setTimeout(function () {
action();
}, 500);
}
, cancelToken
, onkeyup = function (event) {
 
var content = element.value;
window.clearTimeout(cancelToken);
 
cancelToken = delay(function () {
if (content === element.value && content.length > 2) {
onNext(content);
}
});
};
 
element.addEventListener('keyup', onkeyup, false);
}
 
function initialize () {
var textInput = document.getElementById('textInput');
 
throttleInput(textInput, function (content) {
var element = document.createElement('li');
element.innerHTML = content;
document.getElementById('results').appendChild(element);
});
}
</script>
</head>
 
<body style="font-family: Consolas, monospace; overflow: hidden" onload="initialize();">
<input type="text" id="textInput"></input>
<ul id="results"></ul>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.