debounce() là kỹ thuật buộc một hàm phải đợi một khoảng thời gian nhất định trước khi thực thi. Trong khoản thời gian đợi, mọi tác động sẽ đều bị bỏ qua và chỉ nhận duy nhất 1 hành động diễn ra trong thời gian chúng ta định trước.

Các sự kiện như scroll, movemouse, click , keydown hao tốn của chúng ta rất nhiều tài nguyên mỗi khi nó được gọi để thực hiện một hành động. Sử dụng debounce nhằm mục đích giảm hao tổn tài nguyên bằng cách ngăn một chức năng được gọi nhiều lần liên tiếp.

Ví dụ: Ta có hàm fn là hàm gọi

// Debounce function looks like
function debounce(fn, ms) {
	let timer;

	return function() {
		// Nhận các đối số
		const args = arguments;
		const context = this;

		if(timer) clearTimeout(timer);

		timer = setTimeout(() => {
			fn.apply(context, args);
		}, ms)
	}
}
// using Debounce
document.querySelector('.input-search').addEventListener("keydown", debounce((event) => {
	callApiToSearch(event.input.value);
}, 1000));

Trong đó,

• fn: Là hàm được thực thi
• ms: Khoảng thời gian giới hạn