контролировать скорость settimeout в вызове Ajax - PullRequest
0 голосов
/ 13 марта 2019

Я пытаюсь контролировать скорость объекта Canvas с помощью ползунка. Проблема в том, что холст читает данные из ajax-вызова, и я не могу получить доступ к переменной времени ожидания, чтобы изменить скорость с помощью ползунка на странице.

Я удалил весь код, который не работает. Я возвращаюсь к последней рабочей версии без значения ползунка с жестко закодированными значениями для установленной скорости.

$.ajax({

url: "/static/Data/test.txt",
dataType: "text",
cache: false,
async: true,
success: function (data) {
    var arr =   data.split(/,/g).slice(0);
    function drawShape(x , y,colour){
        context.strokeRect(p + gridX,p,gridX,gridY);
        context.fillStyle = colour;
        context.fillRect(p + gridX * x,p+ gridY * y,gridX,gridY);
    }

    for(let i=0; i<arr.length -2; i+=2){
        window.setTimeout(function () {
            x1 = arr[i];
            y1 = arr[i+1];

            context.clearRect(0, 0, 650, 650);

            drawBoard();
            if(grid_type == "grid_standard") {
                drawShape(5, 0, 'green');
                drawShape(5, 1, 'red');
                drawShape(4, 3, 'red');
                drawShape(4, 4, 'red');
                drawShape(2, 2, 'red');
                drawShape(2, 3, 'red');
                drawShape(y1, x1, 'yellow');
            }
            if(grid_type == "grid_cliff") {
                drawShape(5, 5, 'green');
                drawShape(4, 5, 'red');
                drawShape(3, 5, 'red');
                drawShape(2, 5, 'red');
                drawShape(1, 5, 'red');
                drawShape(y1, x1, 'yellow');
            }
            //  $("body").append("Pos: " + x1 + "  "+y1);
        }, i * 50);

    }


    //console.log($.unique(position));
    // $("#div1").text(data);
}

});

Любые указатели будут с благодарностью.

1 Ответ

0 голосов
/ 13 марта 2019

Вам нужно очистить текущее время ожидания и создать новое время ожидания, если вы хотите изменить продолжительность.Часто лучше использовать reguestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame и использовать полученную из этого разницу во времени в сочетании с установленной скоростью, чтобы определить, сколько нужно изменить в каждом кадре.

Если вы хотите использовать setTimeout,Вы можете сделать что-то вроде var timeout = window.setTimeout(rest of your code и при изменении значения clearinterval(timeout); и воссоздать тайм-аут

...