延迟jCanvas绘制一条线
问题描述:
我已经尝试过我的运气,并搜索了很多,但无法找到解决我的问题。 有问题的函数应该使用jcanvas绘制一组线,并根据预先记录的时间暂停绘图。 相反,它只是一次绘制整条线。 这里是有问题的jQuery代码:延迟jCanvas绘制一条线
$("#start").click(function(){
$("canvas").css("display","block");
var obj = { strokeStyle: "#000", strokeWidth: 6, rounded: true};
for (i=0;i<counter;i++)
{
obj['x'+(i+1)] = arrX[i];
obj['y'+(i+1)] = arrY[i] - 12;
setTimeout(function() {
var interval = setInterval(function() {
$("canvas").drawLine(obj);
}, 0);
}, timeDiffs[i]);
}
});
答
因为运行setTimeout()
回调之前的循环结束后,回调总是会引用对象的最终状态(即整个循环后,其状态已经运行)。
要解决这个问题,你可以将你的setTimeout()
回调包装在闭包中。通过将回调包装在闭包函数中,我捕获obj
变量的状态。但是,在这种情况下,因为对象是JavaScript中的引用传递对象,我已经克隆了对象(使用$.extend
)以确保其当前状态(属性和全部)被保留。
setTimeout((function(obj) {
return function() {
var interval = setInterval(function() {
$("canvas").drawLine(obj);
}, 0);
};
}($.extend({}, obj))), timeDiffs[i]);
答
只是一个Caleb531的角度简化
$("#start").click(function(){
$("canvas").css("display","block");
var obj = { strokeStyle: "#000", strokeWidth: 6, rounded: true};
for (i=0;i<counter;i++)
{
(function(){
obj['x'+(i+1)] = arrX[i];
obj['y'+(i+1)] = arrY[i] - 12;
var incremental = $.extend({}, obj);
setTimeout(function() {
var interval = setInterval(function() {
$("canvas").drawLine(incremental);
}, 0);
}, timeDiffs[i]);
})();
}
});
我不知道你的意思是给setInterval为0的结果是,你要在不断吸取同一行一遍又一遍一样快,您能够。 – CharlesTWall3