How to throttle input in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Throttling input in Vue limits function execution frequency during continuous user interactions, ensuring consistent performance while maintaining responsiveness. As the creator of CoreUI with extensive Vue.js development experience, I’ve implemented input throttling in real-time search interfaces, live validation systems, and data visualization components. From my expertise, the most effective approach is using throttling functions with Vue’s reactive system to control execution frequency while preserving user experience. This technique prevents performance degradation during rapid input events while ensuring regular updates for smooth user interactions.
Use throttling functions with Vue’s reactive system to limit input processing frequency while maintaining regular updates.
import { ref, watch } from 'vue'
export default {
setup() {
const searchQuery = ref('')
const searchResults = ref([])
let lastExecuted = 0
const throttle = (func, limit) => {
return (...args) => {
const now = Date.now()
if (now - lastExecuted >= limit) {
func.apply(this, args)
lastExecuted = now
}
}
}
const performSearch = throttle(async (query) => {
if (query.length > 2) {
const response = await fetch(`/api/search?q=${query}`)
searchResults.value = await response.json()
}
}, 300)
watch(searchQuery, (newQuery) => {
performSearch(newQuery)
})
return { searchQuery, searchResults }
}
}
Here the throttle function creates a wrapper that tracks the last execution time and only allows function calls after the specified limit period. Unlike debouncing which delays execution, throttling ensures the function executes at regular intervals during continuous input. The search executes at most once every 300ms, providing regular updates while preventing excessive API calls during rapid typing.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for real-time data feeds, progress tracking, and live analytics dashboards where regular updates are essential. Use throttling when you need regular updates during continuous events, and debouncing when you only need the final result after activity stops.
