5
Tôi đã tạo một tập lệnh làm mờ màu nền của phần tử. Tôi sử dụng setTimeout() để thực hiện một sự thay đổi gia tăng cho màu mỗi 5 ms. Kịch bản hoạt động tốt nếu tôi chỉ làm mờ màu nền của một thứ tại một thời điểm, nhưng nếu tôi có, nói rằng, 50 yếu tố tôi đang mờ dần cùng một lúc, tốc độ chậm hơn nhiều so với 5 ms vì tất cả đồng thời setTimeout() s chạy cùng một lúc. Một phai mà bình thường nên thực hiện trong 1 giây, ví dụ, có thể mất 30 giây nếu tôi đang mờ dần 50 phần tử cùng một lúc.JavaScript setTimeout() chậm lại dưới tải nặng
Bất kỳ ý tưởng nào về cách tôi có thể khắc phục vấn đề này?
Dưới đây là kịch bản trong trường hợp bất cứ ai có một ý tưởng:
function fadeBackground(elementId, start, end, time) {
var iterations = Math.round(time/5);
var step = new Array(3);
step[0] = (end[0] - start[0])/iterations;
step[1] = (end[1] - start[1])/iterations;
step[2] = (end[2] - start[2])/iterations;
stepFade(elementId, start, step, end, iterations);
}
function stepFade(elementId, cur, step, end, iterationsLeft) {
iterationsLeft--;
document.getElementById(elementId).style.backgroundColor
= "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";
cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
cur[2] = Math.round(end[2] - step[2] * iterationsLeft);
if (iterationsLeft > 1) {
setTimeout(function() {
stepFade(elementId, cur, step, end, iterationsLeft);
}, 5);
}
else {
document.getElementById(elementId).style.backgroundColor
= "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
}
}
Nó được sử dụng như thế này:
fadeBackground("myList", [98,180,232], [255,255,255], 1000);
Tôi đã suy nghĩ rằng một bộ đếm thời gian có thể là cách để đi, nhưng tôi sợ phải thực hiện sự thay đổi. :) Tôi thực sự quyết định cuộn của riêng tôi bởi vì tôi đã sử dụng jQuery để animate() và nó không thực sự mờ dần khoảng 10% thời gian. Thật không may, đó là một tỷ lệ lỗi không thể chấp nhận. Tôi sẽ xem bài viết. Cảm ơn nhiều! – core
Heh. Stackoverflow có "không animate" vấn đề quá. – Nosredna