Hàm setTimeout và tạo dòng chữ cuộn thanh tiêu đề của trình duyệt bằng Javascript

1. Hàm setTimeout()

Hàm setTimeout() được sử dụng để thiết lập một một khoảng thời gian nhất định sẽ thực hiện một hành động hay nhiệm vụ nào đó. Nhưng cần lưu ý là nó chỉ thực hiện duy nhất có một lần thôi nhé.

Cú pháp: setTimeout(function, time)

Trong đó:

• function: là nội dung cần thực hiện, đây là một hàm
• time: là khoảng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hiện.

Ví dụ 01: Sau 5 giây thì xuất hiện một thông báo lên màn hình

<script type="text/javascript">
	setTimeout(function(){
		alert("Chào mừng bạn đến với www.chiasephp.net");
	}, 5000);
</script>

Xem kết quả

Đối số thứ nhất của hàm setTimeout() là một function. Thì bạn có thể định nghĩa function đó  bên ngoài hàm setTimeout(). Khi truyền hàm này vào hàm thì chỉ có tên hàm và không bao gồm ký tự ( ).

<script type="text/javascript">
	function showMsg(){
		 alert("Chào mừng bạn đến với www.chiasephp.net");
	}
	setTimeout(showMsg, 5000);
</script>

Xem kết quả

2. Hàm clearTimeout() trong Javascript

Hàm clearTimeout() được sử dụng để hủy bỏ việc thiết lập thời gian thực hiện nhiệm vụ của hàm setTimeout().

Lưu ý: Tham số truyền vào hàm clearTimeout() là đối tượng setTimeout() nên lúc này ban phải đặt hàm setTimeout() vào một biến cụ thể.

// hành động
var action = setTimeout(function(){
    // some code
}, 3000);
 
// hủy hành động
clearTimeout(action);

3. Tạo dòng chữ cuộn thanh tiêu đề của trình duyệt bằng Javascript

Thực ra thì mấy hôm trước có một bạn hỏi mình về cái này. Mình thấy nó cũng khá dễ chỉ cần các bạn chịu khó ngồi nghĩ một chút. Do công việc cũng lu bu quá nên hôm nay mới post nên được. Thì nhân tiện mình sẽ post script đó nên cho những bạn nào cần tham khảo.

Đây là đoạn script.

<script type="text/javascript">
	var pos = 0; // vị trị bắt đầu
	var timer = 120; // thời gian lặp
	var spacer = " -- "; // ký tự ghép nối
	var title= document.title; // Lấy về tiêu đề hiện tại
	function ScrollTitle() {
		document.title = title.substring(pos, title.length) + spacer + title.substring(0, pos);
		pos++; // tăng pos thêm 1 đơn vị
		if (pos > title.length) pos = 0; // reset pos
		window.setTimeout("ScrollTitle()", timer);
	}
	// Call function
	ScrollTitle();
</script>     

Mình sẽ giải thích về hàm thực hiện tạo ra chữ chạy trên thanh tiêu đề của trình duyệt ở đây chính là hàm ScrollTitle.

Các bạn có để ý dòng code này không???

document.title = title.substring(pos, title.length) + spacer + title.substring(0, pos);

Trong đoạn script này có sử dụng hàm substring. Và trong bài viết về các hàm xử lý chuỗi trong Javascript mình đã nói về hàm này rồi. 

1. Thuộc tính .length trả về chiều dài chuỗi.

2. Chu kỳ quay vòng của pos.

// Giả sử mình có khai báo một biến title như sau.
var title = "Học lập trình Online";

B1. pos = 0;
document.title = Học lập trình Online + --;
B2. pos = 1
document.title = ọc lập trình Online + -- H;
B3. pos = 2
document.title = c lập trình Online + -- Họ;
B4. pos = 2
document.title =  lập trình Online + -- Học;
Bn. Tiếp tục cho đến hết chuỗi bằng cách tăng biến pos
pos++
// Nếu biến pos = chiều dài chuỗi
// Reset lại giá trị của biến pos = 0
if (pos > title.length) pos = 0;

Xem kết quả

4. Tổng kết.

Như vậy thì trong bài viết này mình đã giới thiệu tới các bạn hàm setTimeout() và clearTimeout(). Và thực hành viết đoạn chương trình tạo dòng chữ chạy trên thanh tiêu đề của trình duyệt.