變量在控制檯中返回正確的值，但未定義

Question

我編寫了一個腳本來加載帶有JSON請求的視頻以提高性能，但我無法使其正常工作。奇怪的是，console.log（currentvid1）返回正確的值，但函數一直說currentvid1未定義。

我想訣竅應該是按部分代碼的順序，但是在嘗試將它們移動到這裏和那裏之後，我就更加困惑了。這是在當前狀態下的代碼：

$(document).ready(function(){ 
    var videosArr = []; 
    var vidIndex = 0; 

    $.getJSON("js/videos.json", function(data) { 
     $.each(data, function(key, val) { 
      videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>'); 
     }); 

     var currentvid1 = videosArr[vidIndex]; 
     var currentvid2 = videosArr[vidIndex+1]; 
     var currentvid3 = videosArr[vidIndex+2]; 

     $('#showmorebtn').click(function(){ 
      if (currentvid1.length > 0 && currentvid2.length > 0 && currentvid3.length > 0){ 
       $('#inputvids').append(currentvid1 + currentvid2 + currentvid3); 
       vidIndex += 3; 
      }else if(currentvid1.length > 0 && currentvid2.length > 0 && currentvid3.length == 0){ 
       $('#inputvids').append(currentvid1 + currentvid2 + currentvid3); 
       $('#showmorebtn').remove(); 
      }else if(currentvid1.length > 0 && currentvid2.length == 0){ 
       $('#inputvids').append(currentvid1); 
       $('#showmorebtn').remove(); 
      }else if(currentvid1.length > 0){ 
       $('#inputvids').append(currentvid1); 
       $('#showmorebtn').remove(); 
      }else if(currentvid1.length == 0){ 
       $('#showmorebtn').remove(); 
      } 
     }); 
    }); 

}); 

也許這代碼不接近正確的一些那些我嘗試過的，但無論如何...我只需要找出與JSON邏輯...

PS：此外代碼可能看起來非常長，其目的。每次點擊只需加載3個或更少的視頻。我想它可以寫得更好，但是我只會在弄清楚爲什麼變量返回undefined後才能處理它。

編輯：順便說一下，整個代碼是$（document）.ready函數的內部。我已經相應地更改了代碼。

Answer 1

最好的解決方案不僅是突破你的函數範圍（你定義的變量在函數之外是不可用的），而且要記住getJSON是異步的，不會立即返回結果。

我的建議是：附上點擊處理程序在getJSON響應：

編輯：既然你加入，你並不總是有3個視頻，我簡單爲你：現在它檢查是否存在視頻和追加它如果是真的，否則它被省略。

var videosArr = []; 
var vidIndex = 0; 

$.getJSON("js/videos.json", function(data) { 
    $.each(data, function(key, val) { 
     videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>'); 
    }); 

    var currentvid1 = videosArr[vidIndex]; 
    var currentvid2 = videosArr[vidIndex+1]; 
    var currentvid3 = videosArr[vidIndex+2]; 

    $('#showmorebtn').click(function(){ 
     if (currentvid1 && currentvid2 && currentvid3){ 
      $('#inputvids').append(currentvid1 + currentvid2 + currentvid3); 
      vidIndex += 3; 
     }else if(currentvid1 && currentvid2){ 
      $('#inputvids').append(currentvid1 + currentvid2); 
      $('#showmorebtn').remove(); 
     }else if(currentvid1){ 
      $('#inputvids').append(currentvid1); 
      $('#showmorebtn').remove(); 
     }else { 
      $('#showmorebtn').remove(); 
     } 
    }); 
}); 

一個更好版本的代碼居然會當你點擊多次工作： （全局現已功能範圍的，當地人被拆除，vidIndex更新實際上讓上點擊一個變化 - 老腳本只是追加三個後續影片連連）

$.getJSON("js/videos.json", function(data) { 
    var videosArr = []; 
    var vidIndex = 0; 

    $.each(data, function(key, val) { 
     videosArr.push('<iframe width="315" height="236" src="'+val+'" frameborder="0" allowfullscreen></iframe>'); 
    }); 

    $('#showmorebtn').click(function(){ 
     if (videosArr[vidIndex] && videosArr[vidIndex+1] && videosArr[vidIndex+2]){ 
      $('#inputvids').append(videosArr[vidIndex] + videosArr[vidIndex+1] + videosArr[vidIndex+2]); 
      vidIndex += 3; 
     }else if(videosArr[vidIndex] && videosArr[vidIndex+1]){ 
      $('#inputvids').append(videosArr[vidIndex] + videosArr[vidIndex+1]); 
      $('#showmorebtn').remove(); 
     }else if(videosArr[vidIndex]){ 
      $('#inputvids').append(videosArr[vidIndex]); 
      $('#showmorebtn').remove(); 
     }else { 
      $('#showmorebtn').remove(); 
     } 
    }); 
});