javascript: 未捕获类型错误: 无法读取未定义的属性 'Play'

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我的网站上有一部电影，但我无法播放电影。

这是java代码。我将视频 ID 的名称发送到 javascript:

for(int i=1; i<=Integer.parseInt(film[0][0]); i++)
         {

             nr="id"+Integer.toString(i);
             printWriter.print("<input type='hidden' id=\""+nr+"\" name='numerId' value='"+film[i][0]+"' />");

         }

这是 JavaScript 代码:

var test2=[];
var test3=[];
var myVideoTab= new Array();
for(i = 1; i < size; i++){
test2[i]='id'+i;
test3[i]=document.getElementById(test2[i]).value;
myVideoTab[i]= document.getElementById(test3[i]);
setTimeout(function () {myVideoTab[i].Play();}, 1000); //in this line is error

这是错误:未捕获类型错误:无法读取未定义的属性“Play”。如果我设置

   myVideoTab1= document.getElementById(test3[i]);
   setTimeout(function () {myVideoTab1.Play();}, 1000);

它可以工作，但只能播放一个视频

Answer 1

问题是，当代码运行时，i 已经是 size+1，这是您没有的索引。

最快的解决方法是将其包装在匿名函数调用中，并以 i 作为参数:

function(val){setTimeout(function () {myVideoTab[val].Play();}, 1000)}(i);

这将确保使用 i 的当前值(将参数名称更改为 val，以便于理解)。

<小时/>

这个简单的示例显示每次迭代的好(包装)和坏(未包装)值:

var div = document.getElementById('r');
var output = "";
for (var i = 0; i < 10; i++) {
   setTimeout(function() {
     output += '<p class="u">unwrapped i is ' + i + '</p>';
     div.innerHTML = output;
   }, 1000);
   (function(val){
     setTimeout(function() {
       output += '<p>wrapped i is ' + val + '</p>';
       div.innerHTML = output;
     }, 1000)
   }(i));
}

p {
  color: green;
  }
p.u {
  color: red;
  }

<div id="r"></div>