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

我不知道你的意思是给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 *。

答

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

延迟jCanvas绘制一条线

相关推荐