如何在javascript中设置回调函数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在javascript中设置回调函数相关的知识，希望对你有一定的参考价值。
我想在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
希望有所帮助！
以上是关于如何在javascript中设置回调函数的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Chrome 和 Firefox 以不同方式处理 jQuery ajax() 回调中设置的 javascript 变量？
为啥 Chrome 和 Firefox 以不同方式处理 jQuery ajax() 回调中设置的 javascript 变量？