【发布时间】：2011-08-02 19:24:52
【问题描述】：
我正在编写一个脚本来读取多个 twitter 提要并将它们写入一个 div。当我只是向特定提要发出 1 个 AJAX 请求时，该代码有效，但是当我尝试遍历提要列表时，我什么也得不到。我很确定这里应该归咎于变量范围，但我不知道如何在 Javascript 中解决它。
这是一个有效的 1-feed 版本，略微简化（顺便使用 jQuery）：
function getTweets()
{
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=[my username]&count=10&include_rts=true&callback=?",
function(tweets){
var tweetArray = new Array();
$.each(tweets, function(i,item){
var tweet = item.text;
var htmlString = ...;
tweetArray.push(htmlString);
});
for(var i=0;i<tweetArray.length;i++)
{
$("#tweet-div").append(tweetArray[i]);
}
},"json");
}
因此，获取 JSON 数据，循环遍历其内容，将一些数据转换为 HTML 并将该 HTML 填充到一个数组中，然后循环该数组以将其内容填充到我的 DOM 中。
这是我用来尝试读取多个提要（但失败）的代码：
function getTweets()
{
var tweetArray = new Array();
var users = new Array();
var user1 = [twitter name];
var user2 = [twitter name]; //etc for each user
users.push(user1,user2,...);
for(var n=0;n<users.length;n++)
{
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+users[n]+"&count=10&include_rts=true&callback=?",
function(tweets){
$.each(tweets, function(i,item){
var tweet = item.text;
var htmlString = ...;
tweetArray.push(htmlString);
});
},"json");
}//end main FOR loop
for(var i=0;i<tweetArray.length;i++)
{
$("#tweet-div").append(tweetArray[i]);
}
}
代码 #2 的最大区别在于，我将 tweetArray 从 .getJSON 成功函数一侧移到了它之外。似乎正在发生的事情是，当我在最后循环通过 .append() 部分中的 tweetArray 时，tweetArray 中没有任何内容。
我的猜测是否正确，因为 .getJSON 成功函数是一个单独的函数，它无法从我的 getTweets() 函数访问局部变量 tweetArray？
如果是这样，我该如何解决这个问题，同时仍然能够像我在 #2 中尝试做的那样循环遍历我的用户列表？
如果我在这里卡住的代码中有任何拼写错误，我深表歉意，但轻微的语法错误不是这里的问题，因为在我的网站上 #1 运行良好。
更新：我意识到如果我在尝试将 tweetArray 数据附加到我的 DOM 之前将 alert(tweetArray) 插入到我的代码中，它甚至不需要将 tweetArray 设为全局变量即可工作。现在我更不知道发生了什么。
更新：这是我正在使用的实际代码的复制/粘贴：
function getTweets()
{
//retrieves a JSON file from twitter.com with the information specified in the URL
//parameters. A description of parameters can be found at
//https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
var tweetArray = new Array();//holds HTML-formatted tweets for everyone
var users = new Array();//holds all the user account info
var user1 = "[twitter name]";
var user2 = "[twitter name]";
var user3 = "[twitter name]";
var user4 = "[twitter name]";
var user5 = "[twitter name]";
var user6 = "[twitter name]";
var user7 = "[twitter name]";
var user8 = "[twitter name]";
users.push(user1,user2,user3,user4,user5,user6,user7,user8);
for(var n=0;n<users.length;n++)
{
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+users[n]+"&count=10&include_rts=true&callback=?",
function(tweets){
$.each(tweets, function(i,item){
var tweetString;
//the names of the various data can be found
//in the twitter API reference pages, such as
//https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
var tweetText = '<div class="tweet-text" id="tweet-text'+i+'" >'+item.text+'</div>';
var userID = item.user.id_str;
var userName = '<div class="tweet-user-name" id="tweet-user-name'+i+'" >'+item.user.name+'</div>';
var userPic = '<img class="tweet-img" id="tweet-img'+i+'" src="'+item.user.profile_image_url +'" />';
//formats created_at data from twitter into a nice date/time
var tweetDate = item.created_at;
var hourminute = tweetDate.substr(tweetDate.indexOf(":")-2,5);
var hour = parseInt(hourminute.substr(0,2))+7;//the +7 is a time zone correction
if (hour > 12)
{
hour = hour-12;
}
else if(hour == 0)
{
hour = 12;
}
var ampm = "AM";
if(hour>=12)
{
ampm = "PM";
}
var minute = hourminute.substr(3,2);
var day = tweetDate.substr(0,3)
var dateNum = tweetDate.substr(8,2);
var month = tweetDate.substr(4,3);
switch(month)
{
case "Jan":
month="01"
break;
case "Feb":
month="02"
break;
case "Mar":
month="03"
break;
case "Apr":
month="04"
break;
case "May":
month="05"
break;
case "Jun":
month="06"
break;
case "Jul":
month="07"
break;
case "Aug":
month="08"
break;
case "Sep":
month="09"
break;
case "Oct":
month="10"
break;
case "Nov":
month="11"
break;
case "Dec":
month="12"
break;
}
var year = tweetDate.substr(-4,4);
var dateFormatted = '<div class="tweet-date" id="tweet-date'+i+'" >'+day+' '+month+'.'+dateNum+'.'+year+' • ' + hour +':'+ minute +' '+ ampm+'</div>';
//reformats the date yet again so that tweets can be sorted chronologically
var sortableDate = month+dateNum+year;
//combines all tweet information into one string of HTML
tweetString = '<div class="tweet" id="tweet'+i+'">'+ dateFormatted+userName+tweetText + '</div>';
var tempArray = new Array();
tempArray=[sortableDate,tweetString];
//pushes formatted tweet HTML code into an array
tweetArray.push(tempArray);
});
},"json");
}
//at this point in the code, the user's browser is still waiting to receive
//the JSON files from twitter, and tweetArray has no data in it. The next line
//causes the code to break for a few seconds while the data is retrieved from
//twitter before trying to insert anything into the DOM
var waitForJSON = setTimeout(function(){insertTweets(tweetArray)},2000);
}
function insertTweets(content)
{
//sort tweets in tweetArray by date instead of by author
content = content.sort();
content = content.reverse();
//change or remove the "Loading Tweets" message
if(content == "")
{
$("#load-status").html("There was an error retreiving tweets.");
}
else
{
$("#load-status").empty();
}
//loops through tweetArray and inserts HTML code into page
for(var i=0;i<content.length;i++)
{
$("#tweet-box").append(content[i][1]);
}
//create patterned background effect for tweets
$(".tweet:odd").css("background-color","#f0f0f0");
$(".tweet:even").css("background-color","#dddddd");
}
【问题讨论】：
-
好的，另一个奇怪的问题。我以为我已经通过将 tweetArray 设为全局变量来解决问题。为了测试，我在 .append() 代码之前有 alert(tweetArray) 。当我删除警报时，整个功能停止工作！我不知道发生了什么。
-
请阅读OP顶部的UPDATE。
-
alert() 修复问题的原因是 alert() 导致代码暂停足够长的时间以使 ajax 成功函数运行。它与我最初认为的变量范围无关。
标签： javascript jquery ajax twitter scope