Question

我正在尝试编写一个chrome扩展程序，它会为我提供输入字符串前3个结果的Youtube视频ID，但我遇到了问题。我的代码： -

var items = [];

function getVideo(searchQuery,item){
    searchQuery = searchQuery.replace(/ /g,'+');
    var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video';
    //console.log(queryURL);
    $.getJSON(queryURL,function(data){
        items = data.items;
        /*for(var i in items){
            console.log((items[i].id.videoId).toString());
        }*/
    });
}

document.addEventListener('DOMContentLoaded',function(){
    var button = document.getElementById('search');
    var div = document.getElementById('results');
    button.addEventListener('click',function(){
        var base_url = 'https://www.youtube.com/watch?v=';
        var url = [];
        var input = document.getElementById('input');
        var result = input.value;
        getVideo(result);
        for(var i in items){
            console.log(items[i].id.videoId.toString());
            //$('<p>'+(items[i].id.videoId.toString())+'</p><br>').appendTo('#results');
            //url.push(base_url+items[i].id.videoId.toString());
        }
        /*for(var j in url){
            console.log("test");
            console.log(url[j]);
            $('<p>'+url[j]+'</p><br>').appendTo('#results');
        }*/
    });
});

现在，当我尝试在当前状态下使用它时，控制台中没有输出。但是，当我做一个小改动时，它工作正常。

var items = [];

function getVideo(searchQuery,item){
    searchQuery = searchQuery.replace(/ /g,'+');
    var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video';
    //console.log(queryURL);
    $.getJSON(queryURL,function(data){
        items = data.items;
        for(var i in items){
            console.log((items[i].id.videoId).toString());
        }
    });
}

document.addEventListener('DOMContentLoaded',function(){
    var button = document.getElementById('search');
    var div = document.getElementById('results');
    button.addEventListener('click',function(){
        var base_url = 'https://www.youtube.com/watch?v=';
        var url = [];
        var input = document.getElementById('input');
        var result = input.value;
        getVideo(result);
        /*for(var i in items){
            console.log(items[i].id.videoId.toString());
            //$('<p>'+(items[i].id.videoId.toString())+'</p><br>').appendTo('#results');
            //url.push(base_url+items[i].id.videoId.toString());
        }*/
        /*for(var j in url){
            console.log("test");
            console.log(url[j]);
            $('<p>'+url[j]+'</p><br>').appendTo('#results');
        }*/
    });
});

我基本上将console.log放在函数getVideo中。但是项目是一个全局变量，所以范围不应该是一个问题。这是怎么回事？

Answer 1

getVideo是异步的，因此在第一个示例中尚未填充您的items数组。

Answer 2

对$.getJSON()的调用不同步，因此当您进行调用然后尝试立即遍历items数组时，由于调用异步运行，该数组尚未填充。

这就是为什么当您将控制台日志记录放在$.getSON的返回块中时，它会起作用，因为调用已经返回了数据。

如果要同步调用JSON数据，请改为使用ajax调用。

这样做的答案是："Is it possible to set async:false to $.getJSON call"

处理JSON对象

2 个答案: