javascript - instagram api jquery 无法正确显示图片

Question

我对 Jquery 和 Javascript 还很陌生，在使用此处提供的 API 时遇到一些问题

https://github.com/potomak/jquery-instagram

我正在尝试循环并抓取多批图片并将它们全部显示到一个 div 中。这是我当前代码的一部分:

$('#morebutton').click(function(){
var numtimes = 3;
console.log("main fun  " + numtimes)
GetMorePictures(numtimes);
});

function GetMorePictures(numtimes) {
    //$("#pictures").html($("#pictures").html() + "<h1>Page " + pagenum++ + "</h1>")
    if (numtimes == 0) {
        return
    }
    console.log("inside fun  " + numtimes)
  $('.instagram2').instagram({
    search: {
    lat: lat,
    lng: lng,
    distance: document.getElementById('Distance').value,
    max_timestamp: ( (document.getElementById("Timing").selectedIndex == 1)? null:nexttime),
    min_timestamp: ( (document.getElementById("Timing").selectedIndex == 1)? prevtime:null)
  },
    count : 100,
    clientId: '7d428aff533f40e1b3d5f919882576d2'
  });

}

$('.instagram2').on('willLoadInstagram', function(event, options) {
    console.log(options);
});

$('.instagram2').on('didLoadInstagram', function(event, response) {
    console.log("just loaded")
    console.log(response)
    //console.log("1")
    prevtime = response.data[0].created_time
    nexttime = response.data[response.data.length - 1].created_time
    var inputTag = document.getElementById("Tag");
    if (inputTag && inputTag.value) {
        for (i = 0; i < response.data.length; i++) {
            if ( $.inArray(inputTag.value, response.data[i].tags) > -1 ) {
                if(i != 0){
                    $("#pictures").html($("#pictures").html() + "<a href='"+response.data[i].link+"' target='_blank'> <img src='"+response.data[i].images.thumbnail.url+"' height=150 width=150 /> </a>")
                }
            }   
        }
    }else {
        for (i = 0; i < response.data.length; i++) {
            if(i != 0){
                $("#pictures").html($("#pictures").html() + "<a href='"+response.data[i].link+"' target='_blank'> <img src='"+response.data[i].images.thumbnail.url+"' height=150 width=150 /> </a>")
            }
        }
    }
    //console.log("2")
    if( $('#pictures').is(':empty') ) {$("#pictures").html($("#pictures").html() + "No Result, Try another search or load more results")}
    searched = true;
    console.log("about to recur");
    GetMorePictures(numtimes - 1);
});

我尝试在 GetMorePictures 函数内部和外部移动内容，但它无法正常工作。如果它们在函数内，则它们会显示多次，如果它们在函数外，则根本不显示。

非常感谢任何帮助。

Answer 1

对 GetMorePictures(numtimes - 1) 的调用无法正常工作，因为您引用的 numtimes 在 didLoadInstagram< 的上下文中未定义 事件回调。要进行快速而肮脏的修复，请尝试将该变量的定义移到 onclick 回调之外。