控制Ajax调用中settimeout的速度

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/API/window/requestAnimationFrame并使用它从中获得的时间差与您设置的速度相结合，以找出每帧中的变化量。

如果你想使用setTimeout，你可以做一些像var timeout = window.setTimeout(rest of your code和更改值clearinterval(timeout);并重新创建超时