HomeLập trìnhJavaScriptĐợi JavaScript –...

Đợi JavaScript – Cách ngủ N giây trong JS với .setTimeout()


Đô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:

  1. Là gì setTimeout() trong JavaScript
  2. JavaScript setTimeout() cú pháp
  3. Cách đợi N giây trong JavaScript
    1. Làm thế nào để sử dụng clearTimeout() phương pháp
  4. setTimeout so với setInterval – 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_name là 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ế.
  • time là 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.
Đọc thêm  Nút HTML onclick – Hướng dẫn sự kiện nhấp chuột JavaScript

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");
}

js2

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.

Đọc thêm  Hãy làm sáng tỏ sự nhầm lẫn xung quanh các phương thức slice(), splice(), & split() trong JavaScript

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!");

js4-1

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, phrasename.

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:

js6

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.

Đọc thêm  JavaScript ES6 — viết ít hơn, làm nhiều hơ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!");

js5

Bây giờ, mã trong setTimeout() sẽ không thực hiện.

Đâu là sự khác biệt giữa setTimeoutsetInterval ?

setTimeout()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");
}

js3

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!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status