How I need to:
Why I need to (this way):
I have large database of records and using ajax method to fetch through. Every time keyup on (search input) send a request... (it's resource waste and uncomfortable to watch how page refresh every keyup). So my way is to create "typing phase" - what I mean describe above.
Only pure JS, no libraries! Thanks.
what you need is called debounce function.
if you don't use libraries like lodash - you can take this realisation:
function debounce(f, ms) {
let isCooldown = false;
return function() {
if (isCooldown) return;
f.apply(this, arguments);
isCooldown = true;
setTimeout(() => isCooldown = false, ms);
};
}
then you can code like this:
const handleSearch = (search) => {
// your logic with fetch or whatever
}
const handleSearchDebounced = debounce(handleSearch, 300)
var timer=null;
document.getElementById("myInput").onkeyup = ()=>{
clearInterval(timer);
timer = setInterval(()=>{
console.log("call ajax search function here.");
clearInterval(timer);
},1000);
};<input type="text" id="myInput">