Question

我正在使用html canvas元素构建一个甘特图样式时间轴。

我目前正在尝试添加允许用户点击下一个/上一个按钮的功能，让甘特图滚动显示更早或更晚。

我这样做的方法是使用span.adjustTime，其中id保存一个以秒为单位的值，以便调整时间（例如，一天为86400）。

我正在尝试为滚动设置动画，因此它看起来像一个滚动，而不是一天前进。

我的计时计算有一个小问题，但下面的脚本不是动画，而是直接跳到最后一次。

我确实在一个单独的setInterval上运行了draw函数，该函数每秒更新一次，所以我希望它不是同一个元素和数据上相同函数的冲突计时器的问题。

jQuery('span.adjustTime').click(function() {

    var adjustBy = parseInt(jQuery(this).attr('id').replace('a', ''));
    var data = jQuery('img#logo').data();

    for(var m = 1; m >= 30; m++) {
        gantt.startUnixTime = gantt.startUnixTime + (adjustBy * (m * 0.001));

        var moveTimer = setTimeout(function() {
            draw(document.getElementById('gantt'), data, gantt);

        }, 1000);

        if (m == 30) {
            clearTimeout(moveTimer);
        }
    }
});

Answer 1

在for循环中，您调用setTimeout 30次，每次使用相同的超时值1000.因此，在1000毫秒之后，30个预定函数将几乎同时执行。我想这不是你想要的。如果你想要一个超过1000毫秒的30帧动画，那么setTimeout应该类似于：

setTimeout(function() { ... }, 1000 / 30 * m)

另请注意，所有30个预定函数都将看到相同的gantt.startUnixTime值，因为相同的对象（gantt）将传递给所有这些函数，并且当它们执行时，for循环已经完成很久以前。

画布滚动动画无法正常工作

1 个答案: