Code Tu Tam

setTimeout và setInterval trong Javascript

Nguyễn Quang Anh
Rate this post

Nếu bạn không muốn một hàm của mình thực hiện ở thời điểm hiện tại mà sẽ thực hiện ở một thời điểm khác thì trong Javascript có 2 phương thức để làm việc đó là:

setTimeout()

Cú pháp

let demo = setTimeout(func|code, [delay], [arg1], [arg2], ...)

Trong đó:
- func|code: Hàm hoặc code thực thi
- delay: Độ trễ thời gian chạy chương trình, tính bằng mili giây (1000 ms = 1 giây), theo mặc định là 0
- arg1, arg2, ... : Đối số cho hàm

Ví dụ sau đây sẽ giúp bạn dễ hình dung hơn:

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 1000);

Hàm sayHi() sẽ được gọi sau thời gian 1 giây.

Ví dụ với hàm có tham số:

function sayHi(thamso1, thamso2) {
  alert( thamso1+ ', ' + thamso2);
}

setTimeout(sayHi, 1000, "Hello", "Thái");

// Kết quả
Hello, Thái

Nếu đối số đầu tiên là một chuỗi, thì JavaScript sẽ tạo một hàm từ nó. Do đó bạn cũng có thể làm như sau:

setTimeout("alert('Hello')", 1000);

Hoặc bạn có thể sử dung arrow functions như sau:

setTimeout(() => alert('Hello'), 1000);

Lỗi mà mọi người thường gặp trong quá trình sử dụng setTimeout() là việc thêm dấu () vào sau hàm:

setTimeout(sayHi(), 1000);

// Kết quả
undefined

==> Vì setTimeout mong đợi một tham chiếu đến một hàm. Và ở đây sayHi()chạy hàm, và kết quả thực thi của nó được chuyển tới setTimeout. Vì thế, kết quả của sayHi() là undefined , vì vậy không có gì được lên lịch.

clearTimeout()

Khi sử dụng setTimeout nó cũng sẽ trả về một timerId mà chúng ta có thể sử dụng để hủy bỏ việc thực thi.

Cú pháp

let timerId = setTimeout(...);
clearTimeout(timerId);

Ví dụ

let timerId = setTimeout(() => alert("Hủy bỏ !"), 1000);
alert(timerId); 

clearTimeout(timerId);
alert(timerId);

Trong đoạn code trên tôi đã lên lịch cho chức năng và sau đó hủy bỏ nó, vậy nên sẽ không có gì xảy ra. Kết quả trả về của tôi sẽ chỉ là 1 số nào đó.

setInterval()

Cú pháp

let demo = setInterval(func|code, [delay], [arg1], [arg2], ...)

Các đối số của setInterval() cũng giống với setTimeout(), nhưng thay thay vì chạy chức năng một lần thì nó sẽ chạy thường xuyên sau một khoảng thời gian nhất định.

Ví dụ

var demo = setInterval(runAfter, 1000);

function runAfter() {
  alert("Hello world!");
}

Sau 1 giây thì hàm runAfter() sẽ chạy và lặp lại liên tục

Để dừng việc lặp lại này ta có thể sử dụng

Ví dụ

let demo = setInterval(() => alert('Hello'), 2000);

setTimeout(() => { clearInterval(demo); alert('stop'); }, 5000);

Với đoạn code trên thì sau mỗi 2 giây sẽ hiển thị thông báo 1 lần và sau 5 giây thì hàm sẽ dừng lại.

Hy vọng bài viết giúp bạn hiểu rõ hơn về setInterval() và setTimeout(). Nếu cảm thấy bài viết có ích hãy chia sẻ để mọi người cùng biết nha!

 

 

 

Exit mobile version