我正在尝试通过更改 DOM 对象的源每 100 毫秒从文件中“获取”图像。我可以看到 GET 调用确实每 100 毫秒返回一次正确的图像,但实际图像显示仅每秒更新一次。这是我完成这项工作的 JavaScript 代码:
<img id="videoDisplay" style="width:800; height:600"/>
<script type="text/javascript">
function videoDataPoll(filename) {
setTimeout(function() {
document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime();
videoDataPoll(filename);
}, 100);
}
</script>
更新:更改函数以使用预加载如下:
<canvas id="videoDisplay" style="width:800; height:600"/>
<script type="text/javascript">
var x=0, y=0;
var canvas, context, img;
function videoDataPoll() {
var filename = getFilename();
canvas = document.getElementById("videoDisplay");
context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
context.drawImage(img, x, y);
setTimeout("videoDataPoll()", 100);
}
img.src = filename + "?random=" + (new Date()).getTime();
}
<script>
仍然以相同的速度更新(实际上是每 5 秒,而不是最初所说的 1 秒)。因此,对于每 50 个获取请求(10 个/秒,持续 5 秒),元素只会更新一次。
另一个重要说明:第二个解决方案在我的本地主机上完美运行,我遇到的问题是当我从远程主机运行相同的网页时。
最佳答案
我建议对图像使用 onload 处理程序而不是固定超时:
function videoDataPoll(filename) {
document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime();
}
document.getElementById("videoDisplay").onload = videoDataPoll;
videoDataPoll(filename);
在这种情况下,您需要从函数内部获取文件名,而不是将其作为参数传递。
关于javascript - DOM react 时间过长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16544884/