nhu thep nguyen

Cùng tìm hiểu cách hoạt động của setTimeout và setInterval trong Javascript

1. setTimeout()

Phương thức setTimeout() gọi một hàm hoặc một biểu thức sau một số mili giây xác định.

  • 1000 ms = 1 giây.
  • Hàm được gọi chỉ thực hiện một lần duy nhất. Nếu muốn hàm được chạy nhiều lần lặp lại thì dùng phương thức setInterval().
  • Dùng phương thức clearTimeout() để chặn việc gọi hàm thực thi.

Cú pháp của phương thức setTimeout:

setTimeout(function, milliseconds, param1, param2, ...)

  • function: Bắt buộc, đây là hàm sẽ được thực thi.
  • milliseconds: Không bắt buộc, đây là số mili giây mà trình duyệt sẽ đợi để thực thi hàm. Nếu bỏ qua thì giá trị mặc định là 0.
  • param1, param2, ... : Không bắt buộc, đây là các tham số dùng để truyền vào hàm function (Không hỗ trợ cho trình duyệt từ IE9 trở về trước).

Ví dụ: Hiển thị hộp thoại thông báo sau 3 giây (3000 mili giây)

setTimeout(function(){ alert("Hello"); }, 3000);

Chú ý: Để sử dụng được phương thức clearTimeout(), bạn phải gán một biến khi khởi tạo phương thức setTimeout:

myVar = setTimeout("javascript function", milliseconds);

Sau đó thì bạn mới có thể dừng việc gọi hàm trong setTimeout bằng cách gọi phương thức clearTimeout() như sau:

clearTimeout(myVar);

Ví dụ:

var myVar;
function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
 clearTimeout(myVar);
}

2. setInterval()

Phương thức setInterval() gọi một hàm hoặc một biểu thức lặp đi lặp lại sau một thời gian xác định tính bằng mili giây.

Phương thức setInterval() sẽ thực hiện việc gọi hàm liên tục cho tới khi gọi phương thức clearInterval() hoặc đóng cửa sổ trình duyệt.

Giá trị của ID trả về bởi phương thức setInterval() được sử dụng làm tham số cho phương thức clearInterval().

Cú pháp của phương thức setInterval:

setInterVal(function, milliseconds, param1, param2, ...)

  • function: Bắt buộc, đây là hàm sẽ được thực thi.
  • milliseconds: Bắt buộc, đây là số mili giây mà trình duyệt sẽ đợi để thực thi hàm, và sẽ lặp lại đúng khoảng thời gian đó để gọi lại hàm. Nếu giá trị mà nhỏ hơn 10 thì giá trị mặc định là 10 mili giây.
  • param1, param2, ... : Không bắt buộc, đây là các tham số dùng để truyền vào hàm function (Không hỗ trợ cho trình duyệt từ IE9 trở về trước).

Ví dụ: Hiện thị hộp thoại alert thông báo "Hello" sau mỗi 3 giây (3000 mili giây)

setInterval(function(){ alert("Hello"); }, 3000);

Chú ý: Để sử dụng được phương thức clearInterval(), bạn phải gán một biến khi khởi tạo phương thức setInterval:

myVar = setInterval("javascript function", milliseconds);

Sau đó thì bạn mới có thể dừng việc gọi hàm trong setInterval bằng cách gọi phương thức clearInterval() như sau:

clearInterval(myVar);

Ví dụ:

Hiển thị thời gian hiện tại (phương thức setInterval() sẽ gọi hàm "myTimer" mỗi giây một lần) trông như kiểu đồng hồ điện tử.

Dùng clearInterval() để dừng việc gọi hàm myTimer:

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}
</script>