javascript - 在 JavaScript 中另一个(异步)函数完成后执行一个函数
问题描述
请给我一个普通的 JS 解决方案,因为我不熟悉编码和引入库只会让我更加困惑。
我在程序中有两个函数:changeText 包含异步 setTimeout 函数,可以在 X 秒内淡入和淡出文本,以及 userNameinput,它允许用户输入文本输入,然后在浏览器上显示输入。
我遇到的问题是用户名输入与changeText函数一起执行。我的目标是让changeText函数首先执行并完成,然后让userNameInput(出现文本输入行)立即执行。
正如您在我的代码中看到的那样,我已经实现了一个回调来尝试解决这个问题。我创建了一个名为welcome 的新函数,将changeText 和useNameInput 函数捆绑在一起,这样当调用welcome 时,它将首先执行changeText,完成然后调用回调中打包的userNameInput。不知何故,我相信由于 changeText 函数中的 setTimeout 函数在 Javascript 环境之外的队列中放置了 X 时间,JS 看到堆栈中没有任何内容,因此无需等待即可继续执行 usernameInput。请帮忙!被困太久了!提前致谢。
HTML:
<div id="h1">Hello,<br></div>
<div id="inputDiv"></div>
CSS:
#h1{
opacity: 0;
transition: 1s;
}
JS:
function fadeIn() {
document.getElementById('h1').style.opacity = '1';
}
function fadeOut() {
document.getElementById('h1').style.opacity = '0';
}
var dialogue = ['Hello,', 'My name is Jane.', 'I have a dog!', 'What is your name?'];
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("value", "");
input.setAttribute("placeholder", "Type your name then press Enter");
input.setAttribute("maxLength", "4");
input.setAttribute("size", "50");
var parent = document.getElementById("inputDiv");
parent.appendChild(input);
parent.style.borderStyle = 'solid';
parent.style.borderWidth = '0px 0px .5px 0px';
parent.style.margin = 'auto';
function changeText() {
var timer = 0;
var fadeOutTimer = 1000;
for (let i = 0; i < dialogue.length; i++) {
setTimeout(fadeIn, timer);
setTimeout(fadeOut, fadeOutTimer);
setTimeout(function () {
document.getElementById('h1').innerHTML = dialogue[i];
}, timer);
timer = (timer + 3000) * 1;
fadeOutTimer = (fadeOutTimer + 3000) * 1.1;
console.log(timer, fadeOutTimer);
}
}
function welcome(callback) {
changeText();
callback();
}
welcome(function () {
function userNameInput() {
function pressEnter() {
var userName = input.value;
if (event.keyCode == 13) {
document.getElementById('h1').innerHTML = "Nice to meet you" +
" " + userName + "!";
}
}
input.addEventListener("keyup", pressEnter);
}
userNameInput();
});
解决方案
如果我想总结一下,您遇到的问题是以下问题:
您有两个函数使用 setTimeout 延迟执行一些代码。由于 setTimeout 没有阻塞,它会“立即”注册 setTimeout 的回调并继续执行函数的其余部分。
function a() {
setTimeout(function() {
console.log('a');
}, 500)
}
function b() {
setTimeout(function() {
console.log('b');
}, 250)
}
a();
b();
在这里,您希望在 500 毫秒后获得“a”,然后在 250 毫秒后获得“b”,但在 250 毫秒后获得“b”,再过 250 毫秒后获得“a”。
这样做的旧方法是使用这样的回调:
function a(callback) {
setTimeout(function() {
console.log('a');
callback();
}, 500)
}
function b() {
setTimeout(function() {
console.log('b');
}, 250)
}
a(b)
因此,a 将调用 b 本身。
一种现代的方法是使用 promises/async/await:
function a() {
return new Promise(function(resolve) {
setTimeout(function() {
console.log('a');
resolve();
}, 500)
});
}
function b() {
return new Promise(function(resolve) {
setTimeout(function() {
console.log('b');
resolve();
}, 250);
});
}
然后调用:
a().then(b).then(function() {/* do something else */})
或者,在异步函数中:
async function main() {
await a();
await b();
// do something else
}
main()
推荐阅读
- javascript - ajax xhr.responseText 当结果包含@error uncaught typeerror
- python - 有没有办法在同一条线上绘制 3 个(或更多)图表
- c# - 从 Page.ClientQueryString() 返回的一个奇怪的编码字符
- node-postgres - 错误:“S”节点 posgres 处或附近的语法错误
- vue.js - 使用 vuetify 数据表的动态表头和值
- javascript - TypeError:无法读取未定义 Reactjs 的属性“地图”?
- gremlin - 搜索在 Janusgraph 中的属性分配的原始数据数组的成员
- php - 调整多个图像字段的大小
- git - 如何在提交前检查打字稿类型?
- c# - ListView SubItem OwnerDraw 粗体部分文本