我正在努力更好更深入地理解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