Bạn có thể trì hoãn thực thi bất kỳ function JavaScript nào bằng phương thức built-in setTimeout().
Giả sử bạn muốn hiển thị hộp thoại alert sau 3 giây.
Đầu tiên chuyển 3 giây sang mili-giây (ms), là 3000ms, rồi thiết lập function:
setTimeout(function() { alert("Đã 3 giây!") }, 3000)Trên là anonymous function (vô danh), không thực tế trong thực tế vì chỉ dùng một lần, không mô tả.
Cùng chức năng nhưng dùng function expression có tên:
const delayThreeSeconds = function() { alert("Đã 3 giây!") } setTimeout(delayThreeSeconds, 3000)Bây giờ bạn có thể tái sử dụng function delay này ở đâu trong dự án bằng cách tham chiếu biến delayThreeSeconds.
setTimeout delay chỉ mang tính gợi ý — không chính xác
Nhiều người không biết thời gian chỉ định trong setTimeout là độ trễ thực thi function tối thiểu — không phải thời gian chính xác sẽ thực thi.
Vì vậy nếu chỉ định 3000ms (3 giây), có thể mất nhiều hơn trước khi function chạy vì JavaScript đồng bộ, chạy một task tại một thời điểm.
Nếu trang web có nhiều task function JS khác được thiết lập chạy trước function setTimeout của bạn, những task đó phải hoàn thành trước, có thể mất từ vài mili-giây đến vài giây.
Điều có thể gây độ trễ lớn là nếu function phụ thuộc vào tải script lớn từ nguồn bên ngoài. Đây là bẫy thường gặp cho người mới, thậm chí dev giàu kinh nghiệm.
Tất cả khiến setTimeout hơi không thể dự đoán, hoặc ít nhất không đáng tin cậy nếu cần độ chính xác cao.
Cách đơn giản tránh vấn đề này (phần lớn)
Nếu có function cụ thể cần timing chính xác, đặt nó chạy trước các function khác. Điều này đảm bảo function quan trọng nhất chạy nhanh nhất có thể.
Tuy nhiên, ngay cả khi function quan trọng nhất chạy trước mọi code, vẫn có thể có một chút độ trễ thực thi.
Ví dụ, nếu người dùng cài nhiều addons/extension trên trình duyệt. Phần mềm đó chạy trên JavaScript (một số thứ) và không thể dự đoán nó gây độ trễ bao nhiêu cho thực thi mã trang web.
Tất cả là lý do hiệu suất là chủ đề quan trọng cần tập trung, và test hiệu suất code trên mọi trình duyệt và thiết bị nhiều là then chốt để cung cấp trải nghiệm người dùng nhất quán.
Tốt để biết: điều bạn học hôm nay cũng áp dụng cho phương thức setInterval, khác biệt là nó chạy lặp lại — setTimeout chạy một lần.