Отложенный рисунок 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, есть 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]);  
     })();       
    } 
});