setTimeout() trong JavaScript

setTimeout() trong JavaScript

Anh NguyễnLeave a comment

Định nghĩa

Phương thức setTimeout() gọi một hàm hoặc đánh giá một biểu thức sau một khoảng thời gian xác định (tính bằng mili giây). Tuy nhiên, nó chỉ thực hiện đúng 1 lần. Phương thức clearTimeout() được sử dụng để dừng không cho hàm chạy nữa dù chưa kết thúc thời gian đã đặt ở phương thức setTimeout().

Đơn vị: 1000 ms = 1 giây

Mẹo: Hàm chỉ được thực thi một lần. Nếu bạn cần lặp lại nhiều lần, hãy sử dụng phương thức setInterval().

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình

Cú pháp

setTimeout(function, milliseconds, param1, param2, ...)
Code language: JavaScript (javascript)

Trong đó:

Tham sốMô tả
functionBắt buộc. Cần có hàm để thực thi
millisecondsBắt buộc. Khoảng thời gian (tính bằng mili giây) về tần suất thực thi mã. Nếu giá trị nhỏ hơn 10, giá trị 10 được sử dụng
param1, param2, …Không bắt buộc. Các tham số cần truyền vào hàm
GIF guay genial cool - animated GIF on GIFER - by Agamazar

Ví dụ

Ví dụ 1: Hiển thị thông báo “Hello!” sau 3 giây

var myVar;

function myFunction() {
  myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}
Code language: JavaScript (javascript)

Ví dụ 2: Hiển thị thời gian bằng văn bản

var x = document.getElementById("txt");
setTimeout(function(){ x.value = "2 seconds" }, 2000);
setTimeout(function(){ x.value = "4 seconds" }, 4000);
setTimeout(function(){ x.value = "6 seconds" }, 6000);
Code language: JavaScript (javascript)

Ví dụ 3: Mở một cửa sổ mới và đóng cửa sổ đó sau 3 giây (3000 mili giây)

var myWindow = window.open("", "", "width=400, height=200");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
Code language: JavaScript (javascript)

Kết luận

Như vậy, phương thức setTimeout() sẽ thực thi hàm 1 lần duy nhất sau một khoảng thời gian xác định. Muốndừng không cho hàm chạy nữa dù chưa kết thúc thời gian đã đặt ở phương thức setTimeout() thì dùng phương thức clearTimeout().

Xem thêm:

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận