使用 setInterval 每 100 毫秒发出一次请求，但该请求有时可能需要超过 100 毫秒

Question

我需要每秒更新

<canvas>

 10 次图像，数据来自 HTTP 请求：

var i = 0;
setInterval(() => {
    i += 1;
    console.log("sending request", i);
    fetch("/data")   // this can sometimes take more than 100 ms
        .then((r) => r.arrayBuffer())
        .then((arr) => {
            // update canvas with putImageData...
            console.log("finished processing", i);
        });

}, 100);

它可以工作，但由于请求有时需要超过 100 毫秒，它给出的结果如下：

sending request 1
sending request 2
sending request 3
finished processing 3
sending request 4
sending request 5
finished processing 5
sending request 6
sending request 7
sending request 8

问题：

“未完成处理”的请求是否会排队等候（然后它会让一切变得更慢！），或者它们只是被丢弃？顺便说一句，我如何修改我的示例以测试是否是前者还是后者（我无法通过 MCVE 确认前者还是后者）？

既然是视频，如果服务器响应时间太长，我需要丢帧，你会怎么做？

PS：需要 150 毫秒响应的示例 Python 服务器代码：

import bottle, time
app = bottle.Bottle()
@bottle.route('/')
def index():
    return open("test.html", "r").read()
@bottle.route('/data')
def data():
    time.sleep(0.150)
    return b"0000"
bottle.run(port=80)

Answer 1

您的输出当前是错误的，因此我会将代码提取到

function

中，以便您始终知道您当前所在的

i

。

看一下 JavaScript 中的

async 关键字。这可以帮助您在发出另一个请求之前等待承诺得到解决。 （如果您不想等待，只需删除 await

 中的 

setInterval

）。 

sendRequest

 函数始终会在 100 毫秒后解析。

var i = 0;
setInterval(async () => {
    i += 1;
    console.log("sending request", i);
    await sendRequest(i) // you may want to remove this
}, 100);

async function sendRequest(i) {
    setTimeout(resolve, 100); // if you want to return if the api takes longer than 100ms

    const data = await fetch("/data");   // this can sometimes take more than 100 ms
    const arr = data.arrayBuffer();    
     // update canvas with putImageData...

    console.log("finished processing", i);
}