Javascript 即使使用SetTimeout，进度条也不更新_Javascript_Html_Css

Javascript 即使使用SetTimeout，进度条也不更新
javascript html css
Javascript 即使使用SetTimeout，进度条也不更新,javascript,html,css,Javascript,Html,Css,我在index.html中有这个 <body> <script> window.onload=function() { let videoDiv = createVideoDiv() document.getElementById("contentVideo").appendChild(videoDiv); document.addEventListener("keydown", function(inEvent){ controlVideo(in
我在
index.html中有这个
<body>

<script>
window.onload=function() {
  let videoDiv = createVideoDiv()
  document.getElementById("contentVideo").appendChild(videoDiv);

  document.addEventListener("keydown", function(inEvent){
    controlVideo(inEvent.keyCode);
  });


}
</script>


<div id="progressBarWrapper">
  <div id="progressBar"></div>
</div>

<div id="contentVideo"></div> 

</body>

以下是创建视频div的方式：
function createVideoDiv() {  
  var video = document.createElement("VIDEO");
  video.setAttribute('controls', '');
  //video.setAttribute('autoplay', '');
  video.setAttribute('preload', 'auto');
  video.setAttribute('width', larguraVideo);
  video.setAttribute('id', 'video');

  var source = document.createElement("SOURCE");
  source.setAttribute('src', obterVideoClicado());
  source.setAttribute('type', 'video/mp4');

  video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(ajustarProgressBar, 40, loadPercentage * 100);

  });

  video.addEventListener('loadeddata', function() {
    var myBar = document.getElementById("progressBarWrapper");
    myBar.style = "display:none;";
    video.play();
  });

  video.appendChild(source);

  return video;
}

甚至进度条也被
setTimeout(ajustarProgressBar, 40, loadPercentage * 100);

进度条未更新，始终保持0%
进度条将根据视频下载进度进行调整
视频进度正常。我已将其打印到console，并且随着视频下载的进行，值也在变化。
您必须将参数传递到函数：
var valor=loadPercentage*100；
无功延迟=100；
setTimeout（（）=>ajustarProgressBar（valor），延迟；

--编辑
您的视频进度事件侦听器现在看起来像：
 video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    var valor = loadPercentage * 100;
    var delay = 100;
    setTimeout(() => ajustarProgressBar(valor), delay);

  });

video.addEventListener（'progress'，function（）{
var范围=0；
var bf=这是缓冲的；
var time=此.currentTime；
当（！（bf.start（range）时，您必须将参数传递给函数：
var valor=loadPercentage*100；
无功延迟=100；
setTimeout（（）=>ajustarProgressBar（valor），延迟；

--编辑
您的视频进度事件侦听器现在看起来像：
 video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    var valor = loadPercentage * 100;
    var delay = 100;
    setTimeout(() => ajustarProgressBar(valor), delay);

  });

video.addEventListener（'progress'，function（）{
var范围=0；
var bf=这是缓冲的；
var time=此.currentTime；
而（！（bf.start（range）则setTimeout
函数采用两个参数：
延迟时间后要调用的函数
延迟时间以毫秒为单位
因此，要调用函数，您必须创建一个函数，该函数将调用您的函数，如下所示：
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);

    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);

因此，在您的代码中，它可能如下所示：
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);

    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);

setTimeout
函数采用两个参数：
延迟时间后要调用的函数
延迟时间以毫秒为单位
因此，要调用函数，您必须创建一个函数，该函数将调用您的函数，如下所示：
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);

    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);

因此，在您的代码中，它可能如下所示：
setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);

    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);

也许您想用ajustarProgressBar（40）
调用setTimeout
中的函数，而不是ajustarProgressBar，40
？不，我想用40或更多的超时调用ajustarProgressBar（loadPercentage*100）。然后使用setTimeout（（）=>ajustarProgressBar（loadPercentage*100），40）
也许你想用ajustarProgressBar（40）
调用setTimeout
中的函数，而不是ajustarProgressBar，40
？不，我想用40或更多的超时调用ajustarProgressBar（loadPercentage*100）。然后使用setTimeout（（）=>ajustarProgressBar（loadPercentage*100），40）
我不明白。我该把它放在哪里？我的意思是，我该如何指定延迟？更新了答案。我假设loadPercentage*100
是一个随时间变化的值。还增加了100ms的小延迟。是的，值正在更新，但进度条在不更新的情况下继续。嗯，当您检查开发工具中的#progressBar元素时你看到style.width属性更新了吗？天哪，我不相信这些废话。我已经重新启动了机器，它现在正在工作。好的，我的代码有一个问题，你的答案已经解决了，但在重新启动后它现在正在工作。谢谢！！！！！我不明白。我把它放在哪里？我的意思是，我如何指定延迟？更新了答案。我假设loadPercentage*100
是随时间变化的值。还增加了100ms的小延迟。是的，该值正在更新，但进度条继续不更新。嗯，当您检查开发工具中的#progressBar元素时，您看到style.width属性更新了吗？天哪，我不相信这些废话。我已经重新启动了机器，它现在正在工作。好吗我的代码有一个问题，您的答案已修复，但在重新启动后它现在正在工作。谢谢！！！！！好的，谢谢。更改了，但进度条仍在那里，为零。没有任何更新。LoadPercentage正在更改。触发进度事件的原因是什么？您确定它正在发生吗？进度会随着视频下载而发生。是的，它正在发生正在发生。我已将该值输出到控制台，并看到了进度…0、0、1、0.3…1。现在我已尝试将progressBar.style.width=“30%”；
添加到ajustarProgressBar（）的最后一行
看看进度条是否增加到30%。不，进度条仍然为零。非常奇怪。好的，谢谢。更改了，但进度条仍在那里，为零。没有任何更新。加载百分比变化很好。是什么导致进度
事件触发？你确定它正在发生吗？进度随着视频下载而发生。是的，它是ha出现了。我已经将该值输出到控制台，我看到了进度…0，0，1，0.3…1。现在我尝试将progressBar.style.width=“30%”；
添加到ajustarProgressBar（）
的最后一行，只是为了看看进度条是否增加到30%。不，进度条仍然为零。非常奇怪。