[英]JavaScript setTimeout() slows down under heavy load
我创建了一个淡化元素背景颜色的脚本。 我使用 setTimeout() 每 5 毫秒对颜色进行一次增量更改。 如果我一次只淡化一件事的背景颜色,该脚本效果很好,但是如果我有 50 个元素,我一次全部淡化,速度比 5 毫秒慢得多,因为所有并发 setTimeout() 一次运行。 例如,如果我一次淡入 50 个元素,通常应该在 1 秒内执行的淡入淡出可能需要 30 秒。
我有什么想法可以克服这个问题吗?
这是脚本,以防万一有人有想法:
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] + ")";
}
}
它是这样使用的:
fadeBackground("myList", [98,180,232], [255,255,255], 1000);
首先,您的脚本没有考虑到最小超时通常为 10-15 毫秒,具体取决于浏览器。 你可以看到我关于这个主题的帖子。 在里面你会找到一个流行浏览器的表格和一个测量它的程序的链接,这样你就可以自己验证声明。 我很抱歉地说,但每 5 毫秒迭代一次是一厢情愿的想法。
其次,定时器不是中断。 它们没有魔法——它们不能中断浏览器中正在运行的任何东西并执行它们的有效载荷。 相反,它们将被推迟到正在运行的代码完成并且浏览器重新获得控制权和运行计时器的能力。 淡入淡出 50 个元素需要时间,我敢打赌它超过 5 毫秒,特别是如果您考虑到浏览器的整个延迟模型:您更新 DOM,浏览器将更新其视觉表示……在某个时间点。
我想以积极的方式结束:
除了其他答案之外,这里还有John Resig关于计时器的优秀文章: http : //ejohn.org/blog/how-javascript-timers-work/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.