我试图更好,更深入地了解JS,以提高自己的技能。因此,我编写了一个演示应用程序,该应用程序在加载HTML文档后添加了JS,CSS并创建了DOM元素。 我还添加了异步/等待和承诺。 当我等待承诺被解决时(JSFiddle代码中的第31行),该应用程序停止工作。
似乎我听不懂什么,但是我不知道确切地知道什么以及如何找到方向,什么以及如何改进。 所以,我需要你的建议。
这是小提琴:
http://jsfiddle.net/k4z86nw3/9/
现在它可以了,但是,正如我已经提到的,如果您取消注释第31行,
(await wait)();
它将停止工作。
答案 0 :(得分:3)
如https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise所示,它需要在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>
答案 1 :(得分:1)
您正在等待承诺解决(在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