延遲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]);        
     } 
});

來源

2013-12-16 Martin

我不知道你的意思是給setInterval爲0的結果是，你要在不斷吸取同一行一遍又一遍一樣快，您能夠。 – CharlesTWall3

因爲運行setTimeout()回調之前的循環結束後，回調總是會引用對象的最終狀態（即整個循環後，其狀態已經運行）。

要解決這個問題，你可以將你的setTimeout()回調包裝在閉包中。通過將回調包裝在閉包函數中，我捕獲obj變量的狀態。但是，在這種情況下，因爲對象是JavaScript中的引用傳遞對象，我已經克隆了對象（使用$.extend）以確保其當前狀態（屬性和全部）被保留。

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

FWIW，有an extensive examination of this issue on StackOverflow。

來源

2013-12-16 21:31:30 caleb531

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

來源

2013-12-16 22:11:54 CharlesTWall3

延遲jCanvas繪製一條線

回答

相關問題