線條的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]);      
      })();                         
    }
});