Question

我可以在逐步执行它之前和之后使用console.log来构建列表项。当我运行代码时，我在我的html中得到10个列表项，所有这些都是“undefined”而不是我从我的chrome历史记录中提取的值。

关于为什么的任何想法？

var urlarray = []

var historyResults = function () {

var microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
var oneWeekAgo = (new Date).getTime() - microsecondsPerWeek;

chrome.history.search({
    'text': '',            // Return every history item....
    'startTime': oneWeekAgo  // that was accessed less than one week ago.
}, function(historyItems) {
    for (var i = 0; i < historyItems.length; ++i) {
        urlarray.push(historyItems[i].url);
}
})
console.log(urlarray)

}

historyResults()


function addElement () { 

var makeUL = function(data) {

var ul = document.createElement("ul");
// create the UL 

console.log(urlarray)

for (i = 0; i < 10; i++) {
var a = document.createElement('a');
    a.href = data[i];
    a.appendChild(document.createTextNode(data[i]));
    console.log(a)
var li = document.createElement("li");
  li.appendChild(a);
ul.appendChild(li);
// step through the array and create a link out of the value of the array and append them to the list item
// append the list item to the UL
}

return ul;
// return ul full of li
}

console.log(urlarray)
document.getElementById("arraylist").appendChild(makeUL(urlarray));
// go to html to find div and append the full UL with urlarray as the array
}

addElement()

Answer 1

你有两个问题在继续。

首先，您正在记录数组，但您的浏览器不会立即记录。当CPU可用时，它会这样做。记录数组时，它尚未填充值。片刻之后，当您在浏览器控制台中展开阵列时，阵列现在已填充，因为数组的评估已延迟。

如果将日志记录语句更改为：console.log(JSON.stringify(urlarray))，则可以更清楚地看到这一点。这会强制立即评估对象并将其转换为JSON字符串，然后可以稍后将其写入浏览器控制台。

有关已记录对象延迟评估的详细信息，请参阅this question。

好的，这就把我们带到了你的第二个问题。您的日志记录语句在回调chrome.history.search之前正在执行。这就是阵列尚未填充的原因。您需要使用promises来确保代码按预期顺序执行。为此，你应该使用像jQuery或Q这样的库。

我建议阅读承诺。无论您使用哪个库，您的代码都将遵循以下基本结构：

获得延期＆＃39;宾语。我称之为deferred。
在回调中，使用数组解析deferred：deferred.resolve(urlarray)
您的日志记录语句所在的位置，从延迟对象获取承诺。从historyResults方法返回该承诺。
您拨打historyResults的地方，而不是：

historyResults.then(function(urls) { 
    console.log("promise was resolved!", urls);
    // do things with your urls here, like add elements
});

在此回调中执行依赖于您的网址此处的内容。如果这样做，您的代码将保证在urls数组完全填充并准备就绪时执行。

这是一个很大的话题，所以google＆＃34; javascript承诺＆＃34;还有祝你好运。我希望这有助于您开始朝着正确的方向前进。

如果您不想使用承诺：

如果您不想使用promises，则需要在chrome.history.search的回调中执行所有操作。这是保证阵列填充的唯一方法。

异步代码很有趣。

我可以console.log我的数组，但它的值显示为未定义时附加到div

1 个答案: