1

我正在处理 HTML5 画布中呈现的可滚动时间轴。我已经开发了大部分功能，但我注意到 Safari 上出现意外崩溃（在 chrome 和 firefox 中不会崩溃），所以我删除了所有功能（只留下非常基本的时间线）以验证这是否成功不要改变现状。

在这里您可能会看到时间线的演示（简化为似乎导致崩溃的基本构建块）：http: //jsfiddle.net/Saturnix/uUQtH/3/

您可以单击并拖动以滚动浏览天数，如果您取消注释某些代码行，您还将看到天数和月数。

尝试从左到右滚动时间线，重复此操作，直到您的浏览器崩溃（您可能需要强制退出）。

这是我在崩溃前得到的错误：

TypeError: 'undefined' is not a function (evaluating 'g.ctx.lineTo(x, g.height / 1.4)')

它总是看起来g.ctx.lineTo工作正常，但没有任何明显的原因，它停止工作。您可以尝试记录x，或者g.height / 1.4您会看到崩溃与这些值不一致。

此外，如果您取消注释打印年份和月份的行，浏览器报告的错误将不一样。这意味着很明显，崩溃与渲染本身的功能无关。

可能的原因：需要过多的 CPU。

由于它是如何实现的，所有在屏幕之外的时间线部分都被考虑在循环中（即使没有渲染）{这仅适用于从左侧超出屏幕的时间线部分，不是从右边}。我无法避免它。因此，您向右滚动的次数越多，完成循环的时间就越长（直到 javascript 阻止您）。这是绘制循环的超级简化伪代码版本：

start = 0;

function draw(){
    day = 0;

    for (x = start; x <= screen.width; x += 10, d += 1){

        // check if first day of the month
        if (d days from now is 1)
            draw long line at position x
        else
            draw short line at position x

    }
}

function mouseDragging(){

    // users dragging mouse cursor
    // start changes accordingly but always stays minor than 0

}

如您所见，start将很快（如果用户愿意）达到非常低的值，从而使绘制循环很长时间才能完成。这可能是坠机的原因吗？我不认为它是：通常当我编写长循环时，计算机开始滞后，但它永远不会在控制台中引发错误并立即崩溃。但是，这是我看到的唯一可能的原因。

4

0 回答 0