TimeController

Demo for instant search

 
function wow(name){ 
	var el = document.getElementById(name)
	    el.style.webkitAnimation = 'none';
	    setTimeout(function() {
	        el.style.webkitAnimation = '';
	    }, 10);
}
function d() {
	wow("span-d");
}
function i() {
	wow("span-i");
}
function t() {
	wow("span-t");
}

document.getElementById("search").addEventListener('keyup', new TimeController(t).throttle(600));
document.getElementById("search").addEventListener('keyup', new TimeController(d).debounce(600));
document.getElementById("search").addEventListener('keyup', new TimeController(i).immediate(600));
				

immediate | throttled | debounced (do your magic search logic when this one fires...) |

Experiment

 
function D() {
	move("bar-d");
}
function I() {
	move("bar-i");
}
function T() {
	move("bar-t");
}

window.addEventListener('mousemove', new TimeController(T).throttle(1000));
window.addEventListener('mousemove', new TimeController(D).debounce(1000));
window.addEventListener('mousemove', new TimeController(I).immediate(1000)); 
				

Control timers in JavaScript. This demo binds documents mouse move event to trigger time controlled function. Move your mouse and enjoy :O)

mouse moved immediate before one second

mouse moved throttled before one second

mouse moved debounced before one second