Phương thức setTimeout() và setInterval() trong JavaScript

Bạn có bao giờ tự đặt ra câu hỏi “Làm thế nào để thiết lập thời gian thực thi của một hàm”?
Nếu có, thì bài hướng dẫn này sẽ cung cấp cho bạn đầy đủ những kiến thức để giải đáp thắc mắc xoay quanh vấn đề trên.
Phương thức setTimeout()
Phương thức setTimeout() dùng để thiết lập một hàm nào đó sẽ được thực thi sau một khoảng thời gian xác định.
Ví dụ, khi người dùng Click vào nút này thì phương thức alert(“Hello”) sẽ được thực thi sau 5 giây.
Cú pháp
setTimeout(function, milliseconds);
Trong đó:
function là chức năng mà bạn muốn thực thi
Sau khoảng thời gian milliseconds thì function sẽ được thực thi (Lưu ý: 1000 milliseconds = 1 giây)
Ví dụ 1
Đoạn mã bên dưới có chức năng: khi ta bấm vào Button thì hàm abc sẽ được thực thi sau 3 giây
<button type=”button” onclick=”setTimeout(abc, 3000)”>Click</button>

Lưu ý: Khi gọi đến tên hàm muốn thực thi, tuyệt đối KHÔNG thêm cặp dấu ()
Điển hình là ở đoạn mã trên, tôi gọi abc chứ không phải là abc()
Ví dụ 2
Tương tự ví dụ 1: khi ta bấm vào Button thì phương thức alert(‘Hello’) sẽ được thực thi sau 3 giây
Tuy nhiên ở ví dụ này: tôi không gọi đến tên hàm, mà viết thẳng hàm vào tham số thứ nhất luôn

<button type=”button” onclick=”setTimeout(function(){alert(‘Hello’)}, 3000)”>Click</button>

Ví dụ 3 (tham khảo)
Làm cho phương thức setTimeout() thực thi nhiều lần bằng cách gọi lại tên hàm.
<button type=”button” onclick=”rePlay()”>Click here</button>

Ví dụ 4 (tham khảo)
Làm cho phương thức setTimeout() thực thi nhiều lần bằng cách sử dụng vòng lập.
<button type=”button” onclick=”rePlay()”>Click here</button>

Phương thức clearTimeout()
Phương thức clearTimeout() dùng để kết thúc việc thực thi của hàm được thiết lập trong phương thức setTimeout()

Cú pháp
var tên-biến = setTimeout(function, milliseconds);
clearTimeout(tên-biến);
Ví dụ 1
<button type=”button” onclick=”start = setTimeout(abc, 4000);”>Start</button>
<button type=”button” onclick=”clearTimeout(start)”>Stop</button>

Ví dụ 2 (tham khảo)
Chúng ta sẽ làm lại ví dụ 3 trong phần Phương thức setTimeout()
Tuy nhiên, khi màn hình hiển thị đến số 10 thì sẽ dừng lại
<button type=”button” onclick=”rePlay()”>Click here</button>

Phương thức setInterval()
Phương thức setInterval() dùng để thiết lập một hàm nào đó sẽ được thực thi sau một khoảng thời gian xác định và hành động này được lập lại mãi mãi.

Cú pháp
setInterval(function, milliseconds);
Trong đó:
function là chức năng mà bạn muốn thực thi.
milliseconds là khoảng thời gian giữa mỗi lần function được thực thi
Ví dụ

Phương thức clearInterval()
Phương thức clearInterval() dùng để kết thúc việc thực thi lập lại của hàm được thiết lập trong phương thức setInterval()
Cú pháp
var tên-biến = setInterval(function, milliseconds);
clearInterval(tên-biến);
Ví dụ
Chúng ta sẽ sử dụng lại ví dụ trong phần Phương thức setInterval()
Nhưng thêm vào đó một nút để kết thúc việc cập nhật thời gian
<button type=”button” onclick=”clearInterval(start)”>Dừng lại</button>

Lưu ý
Các phương thức setTimeout(), clearTimeout(), setInterval(), clearInterval() có thể CÓ hoặc KHÔNG CÓ tiền tố window
Ví dụ, hai câu lệnh dưới đây là hoàn toàn có chức năng như nhau:
setTimeout(function(){alert(“Hello”)}, 2000);
window.setTimeout(function(){alert(“Hello”)}, 2000);

Javascript Cơ bản