以下javascript在成功加载json文件后立即将内容附加到新创建的段落的末尾。由于在get和getSync函数中有一个假的时间延迟，我认为该页面会一个接一个地加载故事，但事实并非如此。我必须等待一段时间，然后突然间整个故事出现而不是一个接一个。为什么呢？
我试图调试javascript。但是当我逐行执行javascript时，故事会出现一个接一个的段落，当它没有被调试时会有所不同。我不知道为什么。这是代码。
<!DOCTYPE html>
<html>
<head>
<title>Promises test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="network-fake">
<label><input type="checkbox"> Fake network delay</label>
</div>
<div class="story"></div>
<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
</svg>
<script src="utils.js"></script>
<script>
try {
var story = getJsonSync('story.json');
addHtmlToPage(story.heading);
story.chapterUrls.forEach(function(chapterUrl) {
var chapter = getJsonSync(chapterUrl);
addHtmlToPage(chapter.html);
});
addTextToPage("All done");
}
catch (err) {
addTextToPage("Argh, broken: " + err.message);
}
document.querySelector('.spinner').style.display = 'none';
</script>
</body>
</html>
var fakeSlowNetwork;
(function() {
var lsKey = 'fake-slow-network';
var networkFakeDiv = document.querySelector('.network-fake');
var checkbox = networkFakeDiv.querySelector('input');
fakeSlowNetwork = Number(localStorage.getItem(lsKey)) || 0;
networkFakeDiv.style.display = 'block';
checkbox.checked = !!fakeSlowNetwork;
checkbox.addEventListener('change', function() {
localStorage.setItem(lsKey, Number(checkbox.checked));
location.reload();
});
}());
function spawn(generatorFunc) {
function continuer(verb, arg) {
var result;
try {
result = generator[verb](arg);
} catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(callback, errback);
}
}
var generator = generatorFunc();
var callback = continuer.bind(continuer, "next");
var errback = continuer.bind(continuer, "throw");
return callback();
}
function wait(ms) {
return new Promise(function(resolve) {
setTimeout(resolve, ms);
});
}
function get(url) {
// Return a new promise.
// We do all the work within the constructor callback.
var fakeNetworkWait = wait(3000 * Math.random() * fakeSlowNetwork);
var requestPromise = new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('get', url);
req.onload = function() {
// 'load' triggers for 404s etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
return Promise.all([fakeNetworkWait, requestPromise]).then(function(results) {
return results[1];
});
}
function getJson(url) {
return get(url).then(JSON.parse);
}
function getSync(url) {
var startTime = Date.now();
var waitTime = 3000 * Math.random() * fakeSlowNetwork;
var req = new XMLHttpRequest();
req.open('get', url, false);
req.send();
while (waitTime > Date.now() - startTime);
if (req.status == 200) {
return req.response;
}
else {
throw Error(req.statusText || "Request failed");
}
}
function getJsonSync(url) {
return JSON.parse(getSync(url));
}
function getJsonCallback(url, callback) {
getJson(url).then(function(response) {
callback(undefined, response);
}, function(err) {
callback(err);
});
}
var storyDiv = document.querySelector('.story');
function addHtmlToPage(content) {
var div = document.createElement('div');
div.innerHTML = content;
storyDiv.appendChild(div);
}
function addTextToPage(content) {
var p = document.createElement('p');
p.textContent = content;
storyDiv.appendChild(p);
}
{
"heading": "<h1>A story about something</h1>",
"chapterUrls": [
"chapter-1.json",
"chapter-2.json",
"chapter-3.json",
"chapter-4.json",
"chapter-5.json"
]
}
{
"chapter": 1,
"html": "<p>Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.</p>"
}
chapter-2.json〜chapter-3.json的格式与chapter-1.json相同。