Bạn có thể trì hoãn việc thực thi bất kỳ hàm JavaScript nào bằng cách sử dụng setTimeout() tích hợp sẵn phương pháp.
Giả sử bạn muốn hiển thị hộp thoại cảnh báo sau 3 giây.
Trước tiên, bạn cần chuyển đổi 3 giây thành mili giây (mili giây), là 3000ms, sau đó thiết lập hàm:
setTimeout(function() {
alert("That’s 3 seconds!")
}, 3000)Ở trên là một hàm ẩn danh (không tên), không quá thực tế trong cuộc sống thực vì nó chỉ có thể được sử dụng một lần và không có tính mô tả.
Dưới đây là cùng một chức năng, nhưng trong một biểu thức hàm được đặt tên:
const delayThreeSeconds = function() {
alert("That’s 3 seconds!")
}
setTimeout(delayThreeSeconds, 3000)
Giờ đây, bạn có thể sử dụng lại hàm trì hoãn của mình ở bất kỳ đâu trong dự án của mình bằng cách tham chiếu đến delayThreeSeconds biến.
độ trễ setTimeout là gợi ý - không chính xác
Hầu hết mọi người không biết rằng thời gian bạn chỉ định trong setTimeout là độ trễ thực thi chức năng tối thiểu - không phải số lượng chính xác của nó sẽ cần để thực thi.
Vì vậy, nếu bạn chỉ định 3000ms (3 giây), có thể mất nhiều thời gian hơn trước khi hàm của bạn thực thi vì JavaScript là đồng bộ, nó chạy một tác vụ tại một thời điểm.
Vì vậy, nếu trang web của bạn có một loạt các tác vụ chức năng JavaScript khác được đặt để thực thi trước setTimeout của bạn , những tác vụ đó sẽ phải hoàn thành trước và có thể mất từ vài mili giây đến vài giây.
Điều gì đó có thể gây ra sự chậm trễ lớn là nếu một trong các chức năng của bạn phụ thuộc vào việc tải một tập lệnh lớn từ nguồn bên ngoài để hoàn thành. Đây là những loại bẫy bạn có thể mắc phải khi mới bắt đầu hoặc thậm chí là một nhà phát triển có kinh nghiệm.
Tất cả điều này tạo nên setTimeout hơi khó đoán hoặc ít nhất là không đáng tin cậy nếu bạn cần độ chính xác của điểm chốt.
Một cách đơn giản để tránh vấn đề này (chủ yếu)
Nếu có một chức năng cụ thể trong dự án của bạn mà thời gian chính xác rất quan trọng, hãy đặt nó chạy trước bất kỳ chức năng nào khác. Điều này ít nhất sẽ đảm bảo rằng chức năng quan trọng nhất của bạn chạy nhanh nhất có thể.
Tuy nhiên, ngay cả khi chức năng quan trọng nhất của bạn được đặt để thực thi trước bất kỳ mã nào khác thì vẫn có thể có một số trì hoãn thực thi.
Ví dụ:nếu người dùng đã cài đặt một loạt các tiện ích bổ sung / tiện ích mở rộng trong trình duyệt của họ. Phần mềm đó chạy trên JavaScript (trong số những thứ khác) và không thể dự đoán mức độ hoặc liệu điều đó có gây ra sự chậm trễ trong quá trình thực thi mã trên trang web của bạn hay không.
Tất cả những điều này là lý do tại sao hiệu suất lại là một chủ đề quan trọng cần tập trung vào và tại sao việc kiểm tra hiệu suất mã của bạn trong tất cả các trình duyệt và trên nhiều thiết bị là rất quan trọng để cung cấp trải nghiệm người dùng nhất quán.
Điều cần biết: những gì bạn học được hôm nay cũng áp dụng cho setInterval , sự khác biệt là nó chạy lặp lại, - setTimeout chạy một lần.