Jinsi ya Kutengeneza Debounced Search Input kwa JS

Debouncing husaidia kupunguza idadi ya function calls unaposcroll au kuandika kwenye input. Hii inaboresha performance, hasa kwenye live search au API calls.

✅ A. HTML Example
<input type="text" id="search" placeholder="Andika kutafuta...">
<ul id="results"></ul>

✅ B. JavaScript (Debounce Function)
// Debounce function
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}

// Example search function
function searchHandler(e) {
const query = e.target.value.toLowerCase();
const results = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']
.filter(item => item.toLowerCase().includes(query));

const resultsList = document.getElementById('results');
resultsList.innerHTML = results.map(item => `<li>${item}</li>`).join('');
}

// Attach debounced search
const input = document.getElementById('search');
input.addEventListener('input', debounce(searchHandler, 300));

✅ Jinsi Inavyofanya Kazi

debounce → function inasubiri muda (delay) kabla ya execution

Inapunguza multiple calls kwenye input event

Inaboresha performance na UX, haswa kwa live search APIs

🔗 Links Za Kujifunza Zaidi

🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 WhatsApp Msaada:
https://wa.me/255693118509