JavaScript 中的等待/睡眠

Question

我正在使用画布绘制图表。我想让它“动画”，这意味着你可以看到如何绘制线条。所以我实现了一个小的“睡眠”功能。但现在它在开始在画布中绘制任何东西之前等待所有sleep（）调用的ms总和。我怎样才能让它在每次击球之间等待？

function sleep(ms) {
    var time = new Date();
    time.setTime(time.getTime() + ms);
    while (new Date().getTime() < time.getTime()) {}
}

//这就是我如何使用它，如果您需要整个上下文，请告诉我。

for ( var columnID in columns) {
    var tempX = startX;
    var tempY = startY;

    this.ctx.beginPath();
    this.ctx.strokeStyle = this.colors[columnID];
    for ( var key in this.data) {
        tempY = startY - this.data[key][columns[columnID]] * 2;
        tempX = tempX + stepWidth;
        this.ctx.lineTo(tempX, tempY);
        this.ctx.stroke();
        sleep(50);
        }
        this.ctx.closePath();
    }

// UDATE： setTimeout（）也被忽略了：

jsfiddle（它使用固定的json搞砸了比例，但它显示了我脚本的上下文）

Answer 1

您可以在Javascript中使用setTimeOut或setInterval。这些函数不会暂停执行，但会设置一个回调函数，该函数将在给定的延迟后调用，语法如下所示

setTimeout(function-identifier, delay, params);

e.g：

function doit(param1, param2){


} 

setTimeout(doit, 500, 20, 20);

在你的情况下它应该是

setTimeout(this.drawLine, 100, x, y);

并且您还必须传递this，因此它变为

setTimeout(this.drawLine, 100, this, x, y);
....
....
this.drawLine = function(_this, x, y) {
    _this.ctx.lineTo(x, y);
    _this.ctx.stroke();
    console.log("draw line " + x + "/" + y);
};

在你的函数中，你在一个循环中调用setTimeout，这将在绘制数组中两个连续点之间的时间没有区别。相反，它会在给定的延迟后绘制所有点。所以你在那里加了一个延迟。这样我就修复了你的代码版本。

看到它：http://jsfiddle.net/diode/pQ4Qg/9/

但正确的方法是创建一个二维点阵列并使用两个函数：一个用于切换路径，另一个用于绘制每个路径。

演示：http://jsfiddle.net/diode/pQ4Qg/11/

您可以调整此项以达到您的要求。

Answer 2

您的sleep功能是不必要的。您可以根据需要使用内置JavaScript函数setTimeout或setInterval。

Answer 3

JavaScript 中的等待/睡眠

好的，所以有两种方法可以解决这个问题。一种是使用 setTimeout() 函数。

setTimeout(() => {
  // Your code goes here
}, <time in miliseconds>)

setTimeout 包含一个回调和第二个时间参数（以毫秒为单位）。
解决此问题的第二种方法是创建睡眠函数。

function sleep(ms) {
  let currentTime = Date.now()
  while(currentTime + ms > Date.now()) {}
}

// Use it like so

console.log("This is printed first")
sleep(1000)
console.log("This is printed 1000ms (1s) from the first console.log")

canvas：在行间/ js sleep（）之间等待

3 个答案:

JavaScript 中的等待/睡眠