Question

我正在研究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将非常快地达到非常低的值（如果用户想要），使绘制循环很长时间才能完成。这可能是坠机的原因吗？我认为不是：通常当我编程长循环时，计算机开始滞后，但它从不会在控制台中抛出错误并立即崩溃。但是，这是我看到的唯一可能原因。

使用JavaScript在Safari中意外崩溃

0 个答案: