HOME › học javascript - lập trình javascript cơ bản>>16. javascript và broswer

setTimeout trong JavaScript và cách hẹn giờ chạy xử lý một lần

27 tháng 6 ,2022

Hướng dẫn cách sử dụng setTimeout và clearTimeout trong JavaScript. Bạn sẽ biết cách sử dụng phương thức setTimeout để chạy một xử lý 1 lần sau khoảng thời gian chỉ định, cũng như cách huỷ hẹn giờ đã định bằng phương thức clearTimeout trong JavaScript trong bài học này.

Phương thức setTimeout trong JavaScript có tác dụng hẹn giờ chạy 1 lần duy nhất. Để hẹn giờ chạy lặp đi lặp lại một xử lý nhiều lần, hãy sử dụng phương thức setInterval để thay thế.

Xem thêm: setInterval trong JavaScript và cách hẹn giờ chạy xử lý nhiều lần

window.setTimeout trong JavaScript là gì

window.setTimeout trong JavaScript là một phương thức của window Object, có tác dụng đặt bộ hẹn giờ để thực thi 1 lần xử lý hoặc đoạn mã, sau khi thời gian chỉ định đã trôi qua. Lưu ý là xử lý hoặc đoạn mã này sẽ chỉ được thực thi đúng 1 lần duy nhất sau khi hết thời gian mà thôi.

Cú pháp hẹn giờ xử lý bằng phương thức window.setTimeout như sau:

window.setTimeout(function[, delaytime])

Trong đó:

function là xử lý hoặc đoạn mã cần hẹn giờ chạy. Chúng ta có thể chỉ định function bằng một hàm thông thường, hoặc là một đoạn mã, tuy nhiên vì lý do bảo mật nên cú pháp sử dụng đoạn mã không được khuyến nghị, và thông thường chúng ta sẽ sử dụng hàm đối với đối số này.
delay là thời gian tính bằng mili giây mà bộ hẹn giờ sẽ đợi trước khi thực thi chức năng hoặc mã được chỉ định. Đối số này có thể lược bỏ và khi đó nó sẽ có giá trị bằng 0, có nghĩa là sẽ thực thi ngay lập tức.

Giá trị trả về từ setTimeout sẽ là một ID đại diện cho bộ hẹn giờ được đặt. Cũng bằng cách sử dụng ID này, chúng ta có thể cancel thời gian đã đặt, bằng cách sử dụng một phương window.clearTimeout để cancel nó.

Ví dụ cụ thể, chúng ta hẹn giờ xử lý dispMsg trong 2 giây ( bằng 2000 ms) như sau:

window.setTimeout(dispMsg, 2000);

function dispMsg(){
    alert('Hết giờ');
}

Ngoài ra, chúng ta có thể dùng các hàm arrow hoặc hàm vô danh để khai báo trực tiếp xử lý trong phương thức như sau:

window.setTimeout(function(){
    alert('Hết giờ');
}, 2000);

Hẹn giờ xử lý chạy một lần bằng setTimeout

Sau đây hãy cùng xem ví dụ cơ bản về cách hẹn giờ xử lý chạy 1 lần trong JavaScript bằng phương thức window.setTimeout.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Hẹn giờ xử lý</p>

<input type="button" value="click" id="btn">

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    window.setTimeout(function(){
        alert('Hết giờ');
    }, 2000);
});
</script>

</body>
</html>

Với mã HTML trên, chúng ta hẹn giờ xử lý xuất hiện hộp thoại cảnh báo sau 2 giây, sau khi click vào nút.

Kết quả thì sau khi 2 giây trôi qua từ khi click nút, hộp thoại sẽ hiện ra như sau:

Huỷ hẹn giờ xử lý đã đặt bằng phương thức clearTimeout

Để huỷ hẹn giờ xử lý đã đặt bằng phương thức setTimeout, chúng ta sử dụng phương thức clearTimeout với cú pháp sau đây:

window.clearTimeout(id)

Trong đó id là ID đại diện cho bộ hẹn giờ được đặt bởi phương thức setTimeout mà Kiyoshi đã hướng dẫn ở phần trên.

Ví dụ cụ thể, chúng ta có thể huỷ đi một bộ hẹn giờ, trước khi nó được xử lý như sau:

let id = window.setTimeout(function(){
     alert('Hết giờ');
}, 2000);

window.clearTimeout(id);

Nếu trước khi hết thời gian đặt hẹn giờ xử lý bằng setTimeout mà phương thức clearTimeout được thực thi thì bộ hẹn giờ đó sẽ bị huỷ đi.

Sau đây hãy cùng xem mã mẫu về cách huỷ bộ hẹn giờ:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Huỷ hẹn giờ bằng clearTimeout</p>

<input type="button" value="click" id="btnTimer">
<input type="button" value="cancel" id="btnCancel">

<script>
let timerid;

let btnTimer = document.getElementById('btnTimer');
btnTimer.addEventListener('click', function(){
    timerid = window.setTimeout(function(){
        alert('Hết giờ');
    }, 5000);
});

let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
    window.clearTimeout(timerid);
    console.log('Hẹn giờ bị huỷ')
});
</script>

</body>
</html>

Với mã HTML trên, chúng ta hẹn giờ xử lý xuất hiện hộp thoại cảnh báo sau 5 giây, sau khi click vào nút click.

Thông thường sau khi hết 5 giây, thì hộp thoại cảnh báo sẽ được hiện ra, tuy nhiên nếu trước khi 5s kết thúc mà chúng ta click vào nút cancel thì bộ hẹn giờ sẽ bị huỷ, và hiện thông báo tại màn hình console như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách hẹn giờ và huỷ hẹn giờ xử lý 1 lần bằng phương thức setTimeout và clearTimeout trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.