如何在javascript中设置回调函数

问题描述 投票:0回答:4

我想在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应立即执行。

编辑:我让我的例子更清楚 - 我有两个不同的类我必须添加。

javascript function callback
4个回答
0
投票

那这个呢:

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);

0
投票
 function a (){
   element.classList.add('className');
   setTimeout(b,200);
 }

 function b () {
   element.classList.remove('className');
 }

 a(); 

这调用函数a和200毫秒后调用函数b


0
投票

一旦函数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>

0
投票

事实上,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

希望有所帮助!

© www.soinside.com 2019 - 2024. All rights reserved.