Làm thế nào để viết một chức năng mà gắn một mục vào DOM và trì hoãn đánh dấu tiếp theo?

Question

Gần đây tôi đã tìm thấy câu hỏi sau trực tuyến:

Viết một hàm lấy đối tượng và nối nó vào DOM, làm cho nó được đệm cho đến lần đánh dấu tiếp theo? Giải thích tại sao điều này hữu ích?

Dưới đây là câu trả lời của tôi:

function appendElement(element) { 
    setTimeout(function() { 
     document.body.appendChild(element); 
    }, 0); 
} 

Tại sao tôi lại thiết lập khoảng thời gian về không?

Theo this article, đặt thời hạn thành 0, trì hoãn các sự kiện cho đến khi dấu chọn bên cạnh:

Việc thi hành func đi vào hàng đợi sự kiện trên bộ đếm thời gian đánh dấu gần nhất. Lưu ý, đó không phải là ngay lập tức. Không có hành động nào được thực hiện cho đến lần đánh dấu tiếp theo.

Đây là những gì tôi không chắc chắn của:

• là giải pháp của tôi có đúng không?
• tôi không thể trả lời tại sao phương pháp này là có lợi

Để tham khảo, tôi có câu hỏi này từ trang web này listing 8 JavaScript interview questions.

Tôi cũng muốn chỉ ra rằng tôi đang đặt câu hỏi này cho nghiên cứu và cải tiến của riêng tôi chứ không phải là một phần của thử thách mã, câu hỏi phỏng vấn hoặc bài tập về nhà.

Answer 1

Tôi nghĩ rằng bạn hiểu lầm câu hỏi. Tôi đọc nó khi yêu cầu thêm một phần tử vào DOM, sau đó trì hoãn bất kỳ quá trình xử lý nào nữa cho đến lần đánh dấu tiếp theo. Do đó:

document.appendChild(element); 
setTimeout(function() { 
    resumeProgramFlowFromHere(); 
}, 0); 
// nothing here 

Đó là hữu ích khi bạn muốn chắc chắn có một reflow/sơn lại trước một số hoạt động tốn thời gian diễn ra (để cung cấp cho người dùng thông tin phản hồi thị giác). Trình duyệt đã buộc một repaint trong certain circumstances, nhưng khi họ không, kỹ thuật này có thể hữu ích.

Bạn có thể tìm thêm một số thông tin here và here.

---

Đó là giải thích của tôi về câu hỏi, nhưng tôi thấy nó khó hiểu quá, có lẽ vì nó không rõ ràng ý nghĩa của chúng bằng cách sự kiện. Và có những câu hỏi gây tranh cãi khác trên trang web đó, sự kỳ quặc nhất:

Khái niệm “chức năng làm đối tượng” và điều này ảnh hưởng đến phạm vi biến số như thế nào?

Điều đó đơn giản là không có ý nghĩa với tôi. Được rồi, các hàm là các đối tượng trong JavaScript và các phạm vi cũng liên quan đến các hàm, nhưng đó là các chủ đề riêng biệt. Thực tế là các hàm là các đối tượng không có gì để làm với phạm vi.

Vì vậy, lời khuyên của tôi là đưa những câu hỏi phỏng vấn đó bằng một hạt muối.

Answer 2

Có những trường hợp bạn gặp phải các lỗi yêu cầu kỹ thuật này khắc phục. Nó không cụ thể để phụ thêm một phần tử; đó chỉ là một trường hợp sử dụng.

Đôi khi tôi gặp phải các loại hoạt ảnh cụ thể trong đó thiết lập nhiều thuộc tính css3 cùng lúc không kích hoạt trình duyệt vẽ lại chính xác.

Mặc dù tôi không có ví dụ về mã của trường hợp trước đó, bạn có thể thấy nơi tôi sử dụng kỹ thuật trên trang web của mình http://popped.at. Tìm trong tệp này, và tìm kiếm "// thời gian chờ 0ms là cần thiết cho IE9". Trong trường hợp này, đã xảy ra sự cố trong IE9 khi canvas không được cập nhật đúng cách.

(Các trang web không hoạt động trong backend vào lúc này, đó là lý do tối của nó. Tôi đang làm việc trên đó.)