我想在setTimeout函数a完成后执行函数b。我已经知道我需要一个异步回调函数,但有意识到这一点。
setTimeout(function a (){
element.classList.add('classNameA');
},200);
function b () {
element.classList.add('classNameB');
}
我试过这个,但它不起作用,那有什么问题?
setTimeout(function a (b){
element.classList.add('classNameA');
},200);
function b () {
element.classList.add('classNameB');
}
编辑:由于前一个转换持续时间,需要一个setTimeout函数。函数a完成其工作后,函数b应立即执行。
编辑:我让我的例子更清楚 - 我有两个不同的类我必须添加。
那这个呢:
function b() {
element.classList.remove('className');
}
setTimeout(function a(){
element.classList.add('className');
b();
},200);
或者你需要这样的东西:
setTimeout(function a(){
element.classList.add('className');
setTimeout(function b() {
element.classList.remove('className');
}, 200);
},200);
function a (){
element.classList.add('className');
setTimeout(b,200);
}
function b () {
element.classList.remove('className');
}
a();
这调用函数a和200毫秒后调用函数b
一旦函数b
完成执行,你就可以使用JavaScript Promises来执行函数a
。
var element = document.querySelector('.element');
function a() {
return new Promise(function(resolve, reject) {
setTimeout((function() {
console.log('class added');
resolve(element.classList.add('red'));
}), 2000);
});
}
function b() {
console.log('class removed..');
element.classList.remove('red');
}
a().then(b);
.red{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SetTimeout</title>
</head>
<body>
<span class="element">hello</span>
</body>
</html>
事实上,setTimeout
会在超时后调用你的函数。只需立即调用你的函数a()
并将b
传递给setTimeout
。
例:
function a (){
element.classList.add('className');
}
function b () {
element.classList.remove('className');
}
setTimeout(async function (){
await a();
b();
},200); // a is called after 200 milliseconds
希望有所帮助!