Блог

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

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

 $.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);
}
  

});

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

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

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