Là một nhà phát triển web, khả năng phản hồi và tương tác của ứng dụng web của bạn là những thành phần chính tạo nên trải nghiệm người dùng. Để cải thiện trải nghiệm người dùng cho ứng dụng của mình, bạn cần thêm hành vi động và kiểm soát khi một số đoạn mã nhất định trong ứng dụng của bạn được thực thi.
Phương thức setTimeout() là một công cụ tuyệt vời cho việc này vì nó cho phép bạn lên lịch thực thi mã, sắp xếp hoạt ảnh, tạo bộ hẹn giờ và quản lý các hoạt động không đồng bộ trong ứng dụng của bạn.
Vì vậy, điều quan trọng là phải hiểu cú pháp của setTimeout(), cách sử dụng và cách áp dụng nó cho dự án tiếp theo của bạn. Trong bài viết này, chúng tôi sẽ chỉ đề cập đến vấn đề đó và trang bị cho bạn kiến thức để tận dụng tối đa phương thức setTimeout().
Hàm setTimeout trong JavaScript
setTimeout() là một phương thức toàn cục được liên kết với đối tượng window và được sử dụng để thực thi một hàm hoặc đoạn mã sau một thời gian xác định. Ví dụ: nếu bạn có một hàm muốn thực thi sau bốn giây, setTimeout() là phương pháp bạn có thể sử dụng để đạt được điều này.
Khi được sử dụng, phương thức setTimeout() sẽ đặt bộ hẹn giờ đếm ngược đến thời gian đã chỉ định và sau đó thực thi hàm hoặc mã được truyền cho nó.
Là một phương thức toàn cục có nghĩa là setTimeout() nằm trong một đối tượng toàn cục và do đó có sẵn ở mọi nơi mà không cần phải nhập. Đối tượng chung, được cung cấp bởi Mô hình đối tượng tài liệu (DOM) trong trình duyệt, được tham chiếu bởi cửa sổ tên thuộc tính.
Do đó, chúng ta có thể sử dụng phương thức window.setTimeout() hoặc chỉ setTimeout(), vì cửa sổ toàn cục của đối tượng sẽ được ngụ ý. window.setTimeout() và setTimeout() không có sự khác biệt.
Cú pháp chung của hàm setTimeout() như sau:
setTimeout(function, delay)
- chức năng – đây là một chức năng sẽ được thực thi sau một thời gian nhất định.
- độ trễ – thời gian tính bằng mili giây sau đó hàm được truyền sẽ được thực thi. 1 một giây tương đương với 1000 mili giây.
Khi sử dụng hàm setTimeout(), độ trễ được chỉ định phải là giá trị số để tránh kết quả không mong muốn. Đối số độ trễ là tùy chọn. Nếu không được chỉ định, mặc định 0và hàm được truyền sẽ được thực thi ngay lập tức.
Hàm setTimeout() trả về một mã định danh duy nhất được gọi là timeoutID, là số nguyên dương xác định duy nhất bộ hẹn giờ được tạo khi setTimeout() được gọi.
Cũng lưu ý rằng phương thức setTimeout() không đồng bộ. Bộ đếm thời gian của nó không dừng việc thực thi các chức năng khác trong ngăn xếp cuộc gọi.
Cách sử dụng setTimeout()
Hãy xem một số ví dụ minh họa cách sử dụng phương thức setTimeout():
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)Lối ra:
Hello World in an arrow function - 1 second Hello World after 3 seconds
Trong kết quả đầu ra ở trên, phương thức setTimeout() thứ hai ghi lại kết quả đầu ra của nó trước vì nó có độ trễ ngắn hơn 1 thứ hai so với cái đầu tiên có độ trễ 3 giây. Như đã đề cập trước đó, phương thức setTimeout() không đồng bộ. Sau khi gọi phương thức setTimeout() đầu tiên có độ trễ 3 giây được bắt đầu 3-giây, nhưng nó không dừng việc thực thi mã khác trong chương trình.
Khi phương pháp này được tính từ 3 xuống, phần còn lại của mã trong ngăn xếp cuộc gọi sẽ được thực thi. Trong ví dụ này, đoạn mã tiếp theo là phương thức setTimeout() thứ hai có độ trễ 1 giây. Vì nó có độ trễ ngắn hơn nhiều nên mã của nó được thực thi trước setTimeout() đầu tiên
Khi sử dụng setTimeout(), bạn không cần phải viết trực tiếp hàm trong phương thức setTimeout().
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: newsblog.pl:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)Lối ra:
Hello there! How are you doing? Yours Sincerely: newsblog.pl:)
Khi chúng ta xác định một phương thức ở nơi khác và sau đó truyền nó setTimeout(), chúng ta chuyển setTimeout() một tham chiếu đến hàm mà chúng ta muốn thực thi sau một khoảng thời gian nhất định.
setTimeout() với các tham số bổ sung
setTimeout() có một cú pháp thay thế cho phép bạn truyền các tham số bổ sung cho phương thức setTimeout(). Các tham số này sẽ được sử dụng trong hàm bạn thực thi sau độ trễ.
Cú pháp như sau:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Bạn có thể chuyển bất kỳ số lượng tham số bổ sung nào tùy thuộc vào số lượng đối số cần thiết cho hàm bạn đang tham chiếu.
Hãy xem xét chức năng dưới đây:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}Nếu bạn muốn thực thi hàm trên sau một thời gian sử dụng setTimeout(), bạn có thể thực hiện như dưới đây:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");Lối ra:
Hello John, happy coding!
Lưu ý rằng nếu chúng ta định nghĩa một hàm ở nơi khác và sau đó chuyển nó tới setTimeout(), thì những gì chúng ta truyền vào chỉ đơn giản là một tham chiếu đến hàm đó. Trong ví dụ trên, chúng ta chuyển tham chiếu lời chào chứ không phải lời chào() gọi hàm. Chúng tôi muốn setTimeout() là hàm gọi hàm bằng cách sử dụng tham chiếu của nó.
Vì vậy, chúng tôi không thể truyền trực tiếp các tham số bổ sung như dưới đây:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);Trong đoạn mã trên, hàm chào hỏi được thực thi ngay lập tức mà không cần đợi thời gian trôi qua 2 giây. Sau đó, một lỗi bật lên. Kết quả thực thi mã được hiển thị bên dưới:
hủy bỏ setTimeout()
Chúng ta có thể ngăn một hàm được lên lịch bằng setTimeout() thực thi bằng phương thức clearTimeout(). Những việc như thế này có thể cần thiết nếu chúng ta thiết lập một hàm để thực thi sau một khoảng thời gian nhất định, nhưng chúng ta không muốn hàm thực thi khi các điều kiện nhất định được đáp ứng hoặc các điều kiện thay đổi.
Cú pháp của phương thức clearTimeout() được hiển thị bên dưới:
clearTimeout(timeoutID)
ClearTimeout() nhận một đối số duy nhất, timeoutID, là mã định danh duy nhất được phương thức setTimeout() trả về.
Hãy xem xét ví dụ sau:
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)Lối ra:
2 cleared out Hello after 5 seconds
text() không được thực thi vì clearTimeout() được sử dụng để hủy thời gian chờ của nó, ngăn không cho nó thực thi.
Ưu điểm của việc sử dụng setTimeout()
Một số ưu điểm của việc sử dụng phương thức setTimeout() bao gồm:
- Trì hoãn việc thực thi mã – Chức năng cơ bản của setTimeout() là cho phép các lập trình viên trì hoãn việc thực thi mã. Đây là tính năng chính khi tạo hoạt ảnh, quản lý sự kiện định thời gian và kiểm soát luồng mã không đồng bộ. setTimeout() cũng giải phóng luồng chính để chạy mã khác.
- Triển khai bộ hẹn giờ – setTimeout() cung cấp một cách đơn giản để triển khai các bộ tính giờ đơn giản trong ứng dụng của bạn mà không cần phải sử dụng các thư viện bên ngoài hoặc thực hiện các thao tác ngày phức tạp.
- Điều chỉnh và gỡ lỗi – Phương thức setTimeout() có thể được sử dụng để giới hạn số lượng lệnh gọi đến các chức năng hoặc hành động nhất định, đặc biệt là trong các sự kiện như cuộn hoặc gõ. Khi từ chối, ứng dụng sẽ đợi một khoảng thời gian nhất định trước khi gọi hàm. Việc điều chỉnh giới hạn số lượng lệnh gọi hàm được thực hiện trong một khoảng thời gian nhất định. setTimeout() có thể được sử dụng để đạt được cả hai mục tiêu này
- Cải thiện trải nghiệm người dùng – Hàm setTimeout() cho phép bạn cải thiện trải nghiệm người dùng trong ứng dụng của mình bằng cách kiểm soát thời điểm diễn ra một số hành động nhất định, chẳng hạn như hiển thị thông báo, cảnh báo, thông báo bật lên và hoạt ảnh. Điều này rất hữu ích trong việc ngăn người dùng khỏi bị quá tải thông tin, từ đó cải thiện trải nghiệm người dùng.
- Cải thiện hiệu suất mạng – Hàm setTimeout() có thể được sử dụng để cải thiện hiệu suất và khả năng phản hồi tổng thể của các ứng dụng web bằng cách chia nhỏ các vấn đề phức tạp thành các vấn đề nhỏ hơn, đơn giản hơn nhiều. Những vấn đề nhỏ này có thể được giải quyết bằng phương thức setTimeout(), cho phép các phần khác của mã tiếp tục thực thi mà không ảnh hưởng đến hiệu suất hoặc khả năng phản hồi của ứng dụng.
Tất nhiên, phương thức setTimeout() vừa mạnh mẽ vừa rất hữu ích khi phát triển ứng dụng sử dụng JavaScript.
Nhược điểm của việc sử dụng setTimeout()
Một số nhược điểm của việc sử dụng setTimeout() bao gồm:
- Thời gian không chính xác – setTimeout() không thể đảm bảo thời gian chính xác của lệnh gọi hoặc thao tác hàm. Đôi khi mã được viết kém khác dẫn đến điều kiện tương tranh ảnh hưởng đến setTimeout(). Khi sử dụng nhiều hàm setTimeout() chồng chéo, không phải lúc nào bạn cũng có thể chắc chắn về thứ tự thực hiện, đặc biệt nếu có liên quan đến các hoạt động không đồng bộ khác
- Địa ngục gọi lại – Nếu bạn có quá nhiều lệnh gọi setTimeout() lồng nhau, mã của bạn có thể trở nên khó đọc và gỡ lỗi. Cũng sẽ rất khó để theo dõi dòng logic trong ứng dụng của bạn. Việc sử dụng quá nhiều hàm setTimeout() cũng có thể dẫn đến vấn đề về bộ nhớ trong ứng dụng của bạn nếu lệnh gọi setTimeout() không được xử lý đúng cách.
Mặc dù phương thức setTimeout() có thể ngăn chặn một số thách thức khi sử dụng nó, nhưng bằng cách tuân theo các phương pháp hay nhất và phương pháp mã hóa tốt, các lỗi ứng dụng có thể được giảm thiểu hoặc tránh hoàn toàn.
Ứng dụng
Phương thức setTimeout() có thể được sử dụng để trì hoãn việc thực thi một hàm. setTimeout thường được sử dụng cho hoạt ảnh, tải nội dung bị trì hoãn và xử lý thời gian chờ cho các yêu cầu.
Ví dụ: bạn có thể sử dụng phương thức setTimeout() để hiển thị cảnh báo trên các trang web của mình. Mặc dù setTimeout() không đảm bảo thời gian thực hiện chính xác của hàm nhưng nó đảm bảo việc thực hiện hàm sau một độ trễ cố định.
Bạn cũng có thể tham khảo các nền tảng JavaScript ORM để mã hóa hiệu quả.
