Đôi khi bạn có thể muốn trì hoãn việc thực thi mã của mình.
Bạn có thể cần một số dòng mã nhất định để thực thi tại một thời điểm trong tương lai, khi bạn chỉ định rõ ràng, thay vì tất cả mã thực thi đồng bộ.
Một cái gì đó như thế là có thể với JavaScript.
Trong bài viết này, bạn sẽ tìm hiểu về setTimeout() method – nó là gì và bạn có thể sử dụng nó như thế nào trong các chương trình của mình.
Đây là những gì chúng tôi sẽ trình bày trong hướng dẫn nhanh này:
- Là gì
setTimeout()trong JavaScript - JavaScript
setTimeout()cú pháp - Cách đợi N giây trong JavaScript
- Làm thế nào để sử dụng
clearTimeout()phương pháp
- Làm thế nào để sử dụng
setTimeoutso vớisetInterval– Sự khác biệt là gì?
Là gì setTimeout() trong JavaScript?
Vai trò của setTimeout(), một phương pháp không đồng bộ của đối tượng cửa sổ, là đặt bộ đếm thời gian sẽ thực thi một hành động. Đồng hồ bấm giờ đó cho biết một thời điểm cụ thể khi sẽ có một yếu tố kích hoạt cho hành động cụ thể đó.
Từ setTimeout() là một phần của đối tượng cửa sổ, nó cũng có thể được viết là window.setTimeout(). Điều đó nói rằng, các window tiền tố được ngụ ý và do đó thường được bỏ qua và không được chỉ định.
Các setTimeout() Phương pháp – Tổng quan về cú pháp
Cú pháp chung cho setTimeout() phương pháp trông như thế này:
setTimeout(function_name, time);
Hãy chia nhỏ nó ra:
setTimeout()là một phương pháp được sử dụng để tạo các sự kiện thời gian.- Nó chấp nhận hai cần thiết thông số.
function_namelà tham số bắt buộc đầu tiên. Đó là tên của hàm gọi lại chứa mã mà bạn muốn thực thi. Tên của hàm hoạt động như một tham chiếu và con trỏ tới định nghĩa hàm chứa khối mã thực tế.timelà tham số bắt buộc thứ hai và được định nghĩa trong mili giây (để tham khảo,1 second = 1000 milliseconds). Nó đại diện cho lượng thời gian đã chỉ định mà chương trình phải đợi để chức năng được thực thi.
Nhìn chung, điều này có nghĩa là setTimeout() sẽ thực thi mã chứa trong một chức năng nhất định Một lầnvà chỉ sau một khoảng thời gian xác định.
Tại thời điểm này, điều đáng nói là thay vì truyền tên hàm, bạn có thể truyền vô danh chức năng để setTimeout().
Điều này thuận tiện khi chức năng không chứa nhiều dòng mã.
Vô danh hàm có nghĩa là bạn nhúng mã trực tiếp làm tham số đầu tiên trong setTimeout()và không tham chiếu tên hàm như bạn đã thấy ở trên.
setTimeout(function() {
// function code goes here
}, time);
Một điều cần lưu ý nữa là setTimeout() trả về một timeoutID – một số nguyên dương xác định bộ đếm thời gian được tạo bởi setTimeout().
Sau này bạn sẽ thấy giá trị của timeoutID được sử dụng với clearTimeout() phương pháp.
Cách đợi N giây trong JavaScript
Hãy xem một ví dụ về cách setTimeout() được áp dụng:
//this code is executed first
console.log("Where can I learn to code for free and get a developer job?");
// this line indicates that the function definition will be executed once 3ms have passed
setTimeout(codingCourse, 3000);
//function definition
function codingCourse() {
console.log("freeCodeCamp");
}
Mã JavaScript được thực thi từ trên xuống dưới.
Dòng mã đầu tiên, console.log("Where can I learn to code for free and get a developer job?");được thực thi ngay lập tức khi tôi nhấn chạy.
Dòng mã thứ hai chỉ ra rằng cần phải có độ trễ theo lịch là 3000 mili giây (hoặc 3 giây) trước mã trong codingCourse() chức năng được thực thi.
Sau khi 3000 mili giây trôi qua, bạn sẽ thấy mã bên trong hàm (console.log("freeCodeCamp")) thực hiện thành công.
Hãy xem một ví dụ khác:
console.log("Good Morning!");
setTimeout(function() {
console.log("Good Night!");
}, 1000);
console.log("Good Afternoon!");
Trong ví dụ trên, dòng mã đầu tiên, console.log("Good Morning!");thực hiện ngay lập tức.
Dòng này cũng vậy console.log("Good Afternoon!");mặc dù đó là dòng mã cuối cùng trong tệp.
Mã trong setTimeout() chỉ ra rằng cần có độ trễ một giây trước khi nó chạy.
Tuy nhiên, trong thời gian đó, việc thực thi phần còn lại của mã trong tệp không bị tạm dừng.
Thay vào đó, dòng đó tạm thời bị bỏ qua và dòng console.log("Good Afternoon!"); được thực thi.
Khi một giây đó đã trôi qua, mã trong setTimeout() chạy.
Bạn cũng có thể vượt qua xa hơn tùy chọn tham số để setTimeout().
Trong ví dụ dưới đây, các greeting chức năng chấp nhận hai argumnet, phrase và name.
function greeting(phrase,name) {
console.log(`${phrase}, my name is ${name}` );
}
setTimeout(greeting, 3000,"Hello world","John Doe");
Những cái đó sau đó được chuyển đến setTimeout() và sẽ có độ trễ là 3 giây sau khi hàm được gọi:
Làm thế nào để sử dụng clearTimeout() Phương thức trong JavaScript
Điều gì xảy ra nếu bạn muốn hủy bỏ sự kiện thời gian mà bạn đã tạo?
Bạn có thể dừng mã trong setTimeout() chạy bằng cách sử dụng clearTimeout() phương pháp. Đây là nơi timeoutID đã đề cập trước đó có ích.
Cú pháp chung cho clearTimeout() là như sau:
clearTimeout(timeoutID)
Cách thức hoạt động của nó là bạn phải lưu timeoutIDđược trả về với mọi setTimeout() gọi, đến một biến.
Sau đó, timeoutID được sử dụng như một tham số để clearTimeout()như được thấy bên dưới:
let timeoutID = setTimeout(function(){
console.log("Good Night");
}, 2000);
clearTimeout(timeoutID);
console.log("Good Morning!");
Bây giờ, mã trong setTimeout() sẽ không thực hiện.
Đâu là sự khác biệt giữa setTimeout và setInterval ?
setTimeout() và setInterval() có cú pháp rất giống nhau.
Đây là cú pháp cho setInterval():
setInterval(function_name, time);
Tuy nhiên, không nên sử dụng chúng thay thế cho nhau vì chúng hoạt động theo những cách khác nhau.
setTimeout() kích hoạt một hành động Một lầnnhưng trái lại setInterval() kích hoạt một hành động nhiều lần.
Trong ví dụ bên dưới, hàm codingCourse được gọi cứ sau ba giây:
console.log("Where can I learn to code for free and get a developer job?");
setInterval(codingCourse, 3000);
//function definition
function codingCourse() {
console.log("freeCodeCamp");
}
setInterval() là một lựa chọn tốt khi bạn muốn lặp lại điều gì đó thường xuyên.
Phần kết luận
Và bạn có nó rồi đấy! Bây giờ bạn đã biết những điều cơ bản về cách setTimeout() hoạt động và cách tạo sự kiện thời gian trong JavaScript.
Để tìm hiểu thêm về JavaScript, hãy xem Chứng nhận cấu trúc dữ liệu và thuật toán JavaScript của freeCodeCamp.
Đó là một chương trình giảng dạy miễn phí, được cân nhắc kỹ lưỡng và có cấu trúc, nơi bạn sẽ học một cách tương tác. Cuối cùng, bạn cũng sẽ xây dựng 5 dự án để lấy chứng chỉ và củng cố kiến thức của mình bằng cách áp dụng các kỹ năng mới của bạn vào thực tế.
Cảm ơn vì đã đọc!
