我正在努力更好更深入地理解JS，以提高我的技能。所以，我编写了一个演示应用程序，它添加了JS，CSS并在加载HTML文档后创建了DOM元素。我还添加了async / await和promise。当我等待我的承诺得到解决时（JSFiddle代码中的第31行），应用程序停止工作。
看起来我不明白，但我不知道究竟是什么以及如何找到方向，改进方法和方法。所以，我需要你的建议。
这是小提琴：
http://jsfiddle.net/k4z86nw3/9/
现在它有效，但是，正如我已经提到的，如果你取消注释第31行，
(await wait)();
它会停止工作。
正如在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise上演示的那样，它需要在承诺中调用resolve函数。
'use strict';
function initAnimation() {
(new WOW()).init();
}
function addCSS() {
let cssStyleSheet = document.createElement('link');
cssStyleSheet.rel = 'stylesheet';
cssStyleSheet.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css';
document.head.appendChild(cssStyleSheet);
}
async function addWOW() {
let wowScriptJS = document.createElement('script');
wowScriptJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js';
wowScriptJS.onload = initAnimation;
document.body.appendChild(wowScriptJS);
}
(async function run() {
let res = await fetch('https://dl.dropboxusercontent.com/s/i6ckrkzscn6uuhq/data.json');
addCSS();
addWOW();
let wait = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Already waited N sec.');
resolve();
}, 1000);
});
await wait; // <<< === IF YOU UNCOMMENT THIS LINE, APP WILL STOP WORKING
let jsonData = await res.json();
let sections = jsonData.sections;
function addNewChildToParentDOMElement({
childDOMElementName,
cssClasses,
innerHTML,
src,
parentDOMNode
}) {
let childDOMElement = document.createElement(childDOMElementName);
if (cssClasses) {
childDOMElement.classList.add(...cssClasses);
}
if (innerHTML) {
childDOMElement.innerHTML = innerHTML;
}
if (src) {
childDOMElement.src = src;
}
parentDOMNode.appendChild(childDOMElement);
}
for (let i = 0; i < sections.length; i++) {
console.warn('i==', i);
let newDOMItem = document.createElement('div');
addNewChildToParentDOMElement({
childDOMElementName: 'h2',
cssClasses: ['text-centered'],
innerHTML: sections[i].title,
parentDOMNode: newDOMItem
});
addNewChildToParentDOMElement({
childDOMElementName: 'p',
cssClasses: ['text-centered', 'wow', 'bounceInUp'],
innerHTML: sections[i].desc,
parentDOMNode: newDOMItem
});
let div = document.createElement('div');
div.classList.add('img-centered');
div.classList.add('wow');
div.classList.add('flipInX');
addNewChildToParentDOMElement({
childDOMElementName: 'img',
src: sections[i].imgURL,
parentDOMNode: div
});
newDOMItem.appendChild(div);
document.body.appendChild(newDOMItem);
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>aj_test</title>
<style>
.text-centered {
text-align: center;
}
.img-centered {
text-align: center;
}
</style>
</head>
<body>
</body>
</html>您正在等待承诺解析（在promise执行函数中调用resolve）。您应该通过调用resolve（或reject）来解决（或在出错的情况下拒绝）您的承诺：
let wait = new Promise((resolve, reject) => {
setTimeout(() => {
const someFunc = () => console.log('Already waited N sec.');
resolve(someFunc);
}, 1000);
});
(await wait)(); // in this line you are waiting result of promise resolving and then calling returned someFunc