线条的jCanvas延迟绘制

Question

我已经尝试过运气，进行了很多搜索，但找不到解决我问题的方法。 该函数应该使用jcanvas绘制一组线，并根据预先记录的时间暂停绘制。 相反，它只是一次绘制整条线。 这是有问题的jQuery代码：

$("#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]);                               
        }
});

Answer 1

因为循环在您的setTimeout()回调运行之前完成，所以您的回调将始终引用对象的最终状态（即，在整个循环运行之后的状态）。

要解决此问题，您可以将setTimeout()回调包装在闭包中。 通过将回调包装在闭包函数中，我正在捕获obj变量的状态。 但是，在这种情况下，因为对象是通过JavaScript中的引用传递的，所以我克隆了该对象（使用$.extend ）以确保保留其当前状态（属性和所有状态）。

setTimeout((function(obj) {
    return function() {
        var interval = setInterval(function() {
            $("canvas").drawLine(obj);
        }, 0);
    };
}($.extend({}, obj))), timeDiffs[i]);

FWIW， 在StackOverflow上对此问题进行了广泛的研究 。

Answer 2

只是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]);      
      })();                         
    }
});