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) {