Задержка рисования jCanvas линии

Question

Задержка рисования jCanvas линии

0

Я уже пробовал свою удачу и много искал, но не смог найти решение моей проблемы. Предполагаемая функция должна нарисовать набор строк с использованием 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]);                               
        }
});

Martin 16 дек. 2013, в 16:12

Источник

0

Я не уверен, что вы хотите установить значение InInterval равным 0. В результате вы собираетесь непрерывно рисовать одну и ту же линию снова и снова так быстро, как только можете.
CharlesTWall3 16 дек. 2013, в 22:04

Теги:

javascript

jquery

settimeout

jcanvas

2 ответа

0

просто упрощение точки 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]);      
      })();                         
    }
});

CharlesTWall3 16 дек. 2013, в 19:45

Ещё вопросы

Я не уверен, что вы хотите установить значение InInterval равным 0. В результате вы собираетесь непрерывно рисовать одну и ту же линию снова и снова так быстро, как только можете.

caleb531 · Accepted Answer · 2013-12-16T20-03-00.000Z

Поскольку цикл завершается до запуска обратного вызова setTimeout(), ваш обратный вызов всегда будет ссылаться на конечное состояние объекта (то есть его состояние после запуска всего цикла).

Чтобы исправить это, вы можете завершить обратный вызов setTimeout() в закрытии. Обернув обратный вызов в функции закрытия, я фиксирую состояние переменной obj. Однако в этом случае, поскольку объекты передаются по ссылке в JavaScript, я клонировал объект (используя $.extend), чтобы гарантировать, что его текущее состояние (свойства и все) сохранено.

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

FWIW, qaru.site/questions/166/....