TypeError：variable is undefined

Question

我收到以下错误：TypeError：幻灯片[i]未定义。

它的奇怪，因为它不应该能够访问幻灯片变量？

<script> 
    $('document').ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "getSlides.php", 
      data: '', 
      cache: false, 
      success: function(response) 
      { 
       var slides = JSON.parse(response); 
       for (var i = 0; i < slides.length; i++) { 
        setTimeout(function() { 
         if (slides[i].type === 'image') { 
          $('#slideshow').html('<img src="' + slides[i].image_video + '" />'); 
         } 
        }, 2000); 
       } 
      } 
     }); 
    }); 
</script> 

Answer 1

它看起来像classic closure in a loop problem

$('document').ready(function() { 
    $.ajax({ 
     type: "POST", 
     url: "getSlides.php", 
     dataType: 'json', 
     cache: false, 
     success: function (response) { 
      $.each(slides, function (slide) { 
       if (slide.type === 'image') { 
        $('#slideshow').html('<img src="' + slide.image_video + '" />'); 
       } 
      }) 
     } 
    }); 
}); 

Answer 2

如果我没有弄错，这是一个经典的错误，setTimeout的将执行异步，循环结束后，所以我应该等于幻灯片。回调运行时。为了解决这个问题，创建一个本地范围内的我，就像这样：

   for (var i = 0; i < slides.length; i++) { 
        (function(i){ 
         setTimeout(function(callback) { 
         if (slides[i].type === 'image') { 
          $('#slideshow').html('<img src="' + slides[i].image_video + '" />'); 
         } 
         }, 2000); 
        })(i) 
       } 

Answer 3

你可以代理您的sildes[i]到setTimeout回调函数，ref，fiddle例如

$('document').ready(function() { 
    $.ajax({ 
     type: "POST", 
     url: "getSlides.php", 
     data: '', 
     cache: false, 
     success: function (response) { 
      var slides = JSON.parse(response); 
      for (var i = 0; i < slides.length; i++) { 
       setTimeout(function (slide) { 
        if (slide.type === 'image') { 
         $('#slideshow').html('<img src="' + slide.image_video + '" />'); 
        } 
       }, 2000, slides[i]); 
      } 
     } 
    }); 
}); 

Answer 4

因为由于setTimeout的调用代码在2000ms之后，在那个时候，我的值是slides.length，它会抛出错误。

你必须为每个超时功能安排一个独特的“i”副本。

success: function (response) { 
    var slides = JSON.parse(response); 
    for (var i = 0; i < slides.length; i++) { 
     doSetTimeout(slides, i); 

    } 
} 

function doSetTimeout(slides, i) { 
    setTimeout(function() { 
     if (slides[i].type === 'image') { 
      $('#slideshow').html('<img src="' + slides[i].image_video + '" />'); 
     } 
    }, 2000); 
} 

Answer 5

尝试更换：

for (var i = 0; i < slides.length; i++) { 

到：

for (var i in slides) {