setTimeout
cho đến các API hiện đại như scheduler.yield
và Web Workers. Đồng thời, bài viết cung cấp các ví dụ, phân tích ưu nhược điểm giúp bạn lựa chọn giải pháp phù hợp nhất cho ứng dụng của mình.setTimeout
là phương pháp truyền thống để trì hoãn thực thi một hàm JavaScript. Bằng cách chia nhỏ tác vụ lớn thành các phần nhỏ và gọi liên tục setTimeout
với độ trễ 0 hoặc vài mili giây, bạn có thể tránh làm cho trình duyệt bị đóng băng.setTimeout
giúp chia nhỏ công việc, đảm bảo UI không bị đơ trong quá trình xử lý dữ liệu lớn.requestIdleCallback
cho phép lập trình viên thực thi tác vụ khi trình duyệt đang ở trạng thái "nhàn rỗi", giúp tận dụng thời gian mà trình duyệt không bận thiết yếu.Ưu điểm | Nhược điểm |
---|---|
Tối ưu được thời gian trống UI | Không được hỗ trợ trên tất cả trình duyệt |
Giải quyết tốt các tác vụ ít ưu tiên | Không phù hợp cho nhiệm vụ cần phản hồi tức thì |
scheduler.yield
(thuộc scheduler
API) được thiết kế để cho phép tạm dừng tác vụ và trả quyền điều khiển lại cho luồng chính khi cần thiết. Đây là cơ chế hiện đại nhất giúp chia nhỏ tác vụ một cách hiệu quả.async function bigTask() { while (someCondition) { doWorkChunk(); await scheduler.yield(); }}
await scheduler.yield()
giúp cho UI vẫn phản hồi mượt mà trong lúc hoàn thành các tác vụ lớn.worker.js
:self.onmessage = function(e) { let data = e.data; let result = heavyComputation(data); self.postMessage(result);}
const worker = new Worker('worker.js');worker.postMessage(largeDataSet);worker.onmessage = function(e) { console.log('Kết quả:', e.data);};
function* taskGenerator(items) { for (const item of items) { yield doSomething(item); }}
// Sử dụng:const task = taskGenerator(data);function run() { const { done } = task.next(); if (!done) setTimeout(run, 0);}run();
requestAnimationFrame
giúp đồng bộ các tác vụ làm thay đổi giao diện trong từng khung hình (frame), phần nào giảm giật lag khi cập nhật UI.function update() { doPartialWork(); if (moreWork) { requestAnimationFrame(update); }}update();
setTimeout
, requestIdleCallback
đến các API mới như scheduler.yield
hay sử dụng Web Workers và kỹ thuật virtualization đều cung cấp những cách tiếp cận hiệu quả cho từng trường hợp sử dụng cụ thể.