在AJAX调用中控制速度的速度

Question

我正在尝试通过滑块控制画布对象的速度。问题是画布是从Ajax调用读取数据，我似乎无法访问超时变量以通过页面上的滑块更改速度。

我删除了所有不起作用的代码。我将其返回到最后一个工作版本，而没有滑块值，而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);
}

}）;

任何指针都将不胜感激。

Answer 1

如果要更改持续时间，则需要清除当前超时并创建新的超时。通常最好使用RegueStanimationFrame https://developer.mozilla.org/en-us/docs/web/web/api/window/requestanimationframe，并使用您从中获得的时间差，可以与您合并的速度，以找到可以更改的速度在每个帧中。

如果要使用settimeout，则可以执行诸如var timeout = window.setTimeout(rest of your code之类的事情当更改值clearinterval(timeout);并重新创建超时