Custom delay trong JQuery

Xin chào. Hôm nay mình lại muốn chia sẻ thêm với mọi người một thủ thuật nho nhỏ. Nó có lẽ sẽ thực sự có ích trong việc phát triển các hệ thống website tôi ưu hơn một chút.

Tình huống của mình như sau: Mình có một input để nhập vào từ khóa sẽ tìm kiếm trong CSDL. Và người dùng nhập từ khóa tới đâu thì hệ thống sẽ tìm kiếm ngay với từ khóa mà họ vừa nhập vào. Thì bạn có biết sự kiện nào trong JQuery giúp bạn bắt sự kiện đó không?

Sẽ có một số sự kiện như là keypress, keyup, keydown, onchange, blur. Thì tùy vào mỗi sự kiện mà bạn chọn thì ở đây mình sẽ chọn sự kiện keyup. Thì sự kiện keyup sẽ active khi bạn kết thúc việc nhấn và thả một phím bất kỳ. Tương tự nó với các sự kiện keydown và keypress. Nhưng nếu sự dụng sự kiện keyup thì nó có một điểm yếu là bạn gõ tới đâu hệ thì sự kiện keyup active tới đó. Giả sử bạn nhập vào một chuỗi là "học lập trình php" thì bạn có thể tính ra được là sự kiện sẽ active bảo nhiêu lần.

$('.keyword').keyup(function(){
	alert($(this).val());
});

Thì trong bài viết này mình sẽ chỉ cho các bạn cách làm sao để người dùng có thể nhập bình thường chỉ khi nào người dùng không nhập nữa thì sự kiện đó mới active.

Trong JQuery có thể sử dụng hàm setTimeOut nhưng nó cũng có nhưng điểm yếu nhất định là vì hàm setTimeOut nó sẽ chạy sau một khoảng thời gian nhất định. Nếu bạn gõ ngắn thì phải chờ, gõ dài thì nó chạy mất rồi.

Và đây là giải pháp của mình. Mình sẽ custom một hàm delay như sau:

function delay(callback, ms) {
	var timeout = 0;
	return function() {
		var context = this,
		args = arguments;
		clearTimeout(timeout);
		timeout = setTimeout(() => {
			callback.apply(context, args);
		}, ms || 0);
	}
}

Và trong sự kiện keyup mình sẽ sửa lại như sau:

$('.keyword').keyup(delay(function(){
	alert($(this).val());
},500));

Xem kết quả

Kết luận:

Mình nghĩ có thể có nhiều cách hay hơn nhưng nếu bạn có cách hay hơn vui lòng comment xuống bên dưới. Mình sẽ tiếp thu và học hỏi.