지연된 jCanvas 선 그리기

Question

나는 이미 내 운을 시험해 보았지만 많은 것을 검색했지만 내 문제에 대한 해결책을 찾을 수 없었다. 해당 함수는 jcanvas를 사용하여 선 세트를 그리고 미리 기록 된 시간에 따라 도면을 일시 정지해야합니다. 대신 전체 줄을 한 번에 그립니다. 여기에 문제의 jQuery 코드입니다 : 당신의 setTimeout() 콜백이 실행되기 전에 루프가 완료되기 때문에

$("#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() 콜백을 닫음으로 묶을 수 있습니다. 클로저 함수에서 콜백을 래핑하여 obj 변수의 상태를 캡처하고 있습니다. 그러나이 경우 자바 스크립트에서 객체가 참조로 전달되므로 객체 (복제본 : $.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입니다.

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