Hàm setTimeout() và setInterval() trong Javascript

Trong bài này chúng ta tìm hiểu hai hàm setTimeout() và setInterval() trong Javascript, đây là hai hàm dùng để hẹn giờ trong JS.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Hai hàm này có chung một đặc điểm là thiết lập và thực hiện một nhiệm vụ nào đó trong một khoảng thời gian nào đó, số lần thực hiện có thể được lặp đi lặp lại hoặc không. Tuy vậy giữa hai hàm cũng có sự khác nhau về số lần lặp và chi tiết thế nào thì các bạn xem các phần dưới đây.

1. Hàm setTimeout() trong Javascript

Hàm setTimeout() dùng để thiết lập một khoảng thời gian nào đó sẽ thực hiện một nhiệm vụ nào đó và nó chỉ thực hiện đúng một lần.

Cú pháp: setTimeout(function, time)

Bài viết này được đăng tại [free tuts .net]

Trong đó:

function: là nội dung cần thực hiện, đây là một hàm
time: là khoảng thời gian bao nhiêu (tính bằng mili giây) thì function đó sẽ thực hiện

Ví dụ: Sau 3 giây thì xuất hiện câu chào lên màn hình

XEM DEMO

setTimeout(function(){
    alert("Chào mừng bạn đến với freetuts.net");
}, 3000);

Trong ví dụ này mình đã truyền tham số thứ nhất là một function và tham số thứ hai là số giây mà function sẽ được thực hiện. Ngoài ra bạn có thể viết lại như sau cho dễ nhìn:

XEM DEMO

var do_alert = function(){
    alert("Chào mừng bạn đến với freetuts.net");
};
setTimeout(do_alert, 3000);

Hàm clearTimeout() trong Javascript

Giả sử bạn xây dựng chức năng sau 3 giây thì sẽ xuất hiện thông báo, tuy nhiên sau 2 giây chương trình muốn hủy bỏ thì phải làm thế nào? Lúc này bạn phải sử dụng hàm clearTimeout().

Tham số truyền vào hàm clearTimeout() là đối tượng setTimeout() nên lúc này ban phải đặt hàm setTimeout() vào một biến cụ thể.

// hành động
var action = setTimeout(function(){
    // something
}, 3000);

// hủy hành động
clearTimeout(action);

Ví dụ: XEM DEMO

<script language="javascript">
    var do_alert = setTimeout(function(){
        alert("Chào mừng bạn đến với freetuts.net");
    }, 3000);

    function clearAlert()
    {
        clearTimeout(do_alert);
    }
</script>

<input type="button" onclick="clearAlert()" value="Clear" />

2. Hàm setInterval() trong Javascript

Hàm setInterval() có cú pháp và chức năng giống như hàm setTimeout(), tuy nhiên với hàm setInterval() thì số lần thực hiện lã mãi mãi.

Ví dụ: Cứ sau 3 giây thì xuất hiện câu chào một lần

XEM DEMO

setInterval(function(){
    alert("Chào mừng bạn đến với freetuts.net");
}, 3000);

Trong ví dụ này cứ sau ba giây thì sẽ xuất hiện câu chào và số lần thực hiện sẽ là vĩnh viễn, không tin bạn cứ chạy trang web lên và để vậy.

hàm clearInterval() trong Javascript

Tương tự như hàm clearTimeout(), hàm clearInterval() sẽ xóa đi nhiệm vụ mà ta đã thiết lập trong hàm setInterval(), và ta cũng phải đặt setInterval() trong một biến thì mới clear được.

Ví dụ: Sử dụng hàm setInterval() để xuất câu chào lên màn hình và số lần xuất hiện chỉ 1 lần duy nhất

XEM DEMO

var interval_obj = setInterval(function(){
    alert("Chào mừng bạn đến với freetuts.net");
    clearInterval(interval_obj);
}, 3000);

Trong ví dụ này nội dung thực hiện là xuất hiện câu chào và ngay lập tức xóa nhiệm vụ của interval luôn nên nó chỉ thực hiện 1 lần.

3. Lời kết

Như vậy sự khác nhau giữa hàm setTimeout() và setInterval() là đối với hàm setTimeout() thì số lần thực hiện là 1 lần và đối với setInterval() thì số lần thực hiện sẽ là mãi mãi cho tới khi bạn sử dụng hàm clearInterval() để can thiệp vào. Việc sử dụng hàm nào thì phụ thuộc vào nhu cầu của bạn và hãy lưu ý điểm khác nhau này để làm cho đúng.

Bài này mình sẽ dừng ở đây, hy vọng qua các ví dụ bạn sẽ hiểu được cách sử dụng hàm setTimeout() và setInterval() trong Javascript, chúc bạn học tốt.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Hàm setTimeout() và setInterval() trong Javascript

1. Hàm setTimeout() trong Javascript

Hàm clearTimeout() trong Javascript

2. Hàm setInterval() trong Javascript

hàm clearInterval() trong Javascript

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Hàm setTimeout() và setInterval() trong Javascript

1. Hàm setTimeout() trong Javascript

Hàm clearTimeout() trong Javascript

2. Hàm setInterval() trong Javascript

hàm clearInterval() trong Javascript

3. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript