How to set a callback function in javascript

Question

I want to excecute function b after the setTimeout function a has finished. I allready know i need a asynchronous callback function for that but have problems to realise that.

setTimeout(function a (){
   element.classList.add('classNameA');
},200);

function b () {
   element.classList.add('classNameB');
}

I tried this one but it doesn't work, what is wrong with that?

setTimeout(function a (b){
   element.classList.add('classNameA');
},200);

function b () {
   element.classList.add('classNameB');
}

EDIT: The function a setTimeout is needed because of an previous transition duration. Function b should get excecuted immediately after function a has done its work.

EDIT: i made my example more clear - i have two different classes i have to add.

this may help stackoverflow.com/a/42203607/4693938

ricky
– ricky

2017-12-18 07:40:45 +00:00
Commented Dec 18, 2017 at 7:40 — ricky
– ricky, Commented Dec 18, 2017 at 7:40

rxw · Accepted Answer · 2017-12-18 07:46:21Z

0

What about this:

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

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

Or do you need something like this:

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

answered Dec 18, 2017 at 7:46

rxw

611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Flo Over a year ago

Wouldn't sample b excecute function b synchronous? I need it to get started after function a is done and i don't want a second setTimeout function for that.

rxw Over a year ago

I don't really get what do you want to do. Yeah the first block will execute function b() synchronously after the function a(). I think you should try with promise, look at this

Flo Over a year ago

Okay i will take a look on that. Thanks

illiteratewriter · Accepted Answer · 2017-12-18 07:48:34Z

0

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

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

 a();

This calls function a and 200 milliseconds later calls function b

answered Dec 18, 2017 at 7:48

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

5 Comments

Flo Over a year ago

Thanks for your sample, but it doesn't fit to my situation. I edited my Question.

illiteratewriter Over a year ago

Function a() happens immediately and the animation would happen for 200ms right?

Flo Over a year ago

Yep, you're right, but function a has to wait for the animation duration of 200ms and function b should excecuted immediately after this.

illiteratewriter Over a year ago

In the above, function a gets executed and className exists for 200ms after which it is removed.

Flo Over a year ago

Ah okay now i understand why my Question is confusing - i have to different classes, it's not the same that gets added and removed.

azs06 · Accepted Answer · 2017-12-18 08:10:55Z

0

You could use JavaScript Promises to execute function b once function a done executing.

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>

answered Dec 18, 2017 at 8:10

azs06

3,5072 gold badges24 silver badges27 bronze badges

Comments

Hemanth Raj · Accepted Answer · 2017-12-18 08:27:22Z

0

setTimeout will in fact call your function after the timeout. Just call your function a() instantaneously and pass b to setTimeout.

Example:

 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

Hope that helped!

edited Dec 18, 2017 at 8:27

answered Dec 18, 2017 at 7:43

Hemanth Raj

35k10 gold badges99 silver badges85 bronze badges

6 Comments

Flo Over a year ago

Thanks for your sample, but it doesn't work for me. The function a has a timeout because of an transition, after which the function have to get excecuted. The problem is, that i want function b excecuted immediately after the function a is done, without an additional setTimeout function.

Hemanth Raj Over a year ago

Got it! Hope you are trying to call both a and b one after one, after specified time without additional timeout?

Flo Over a year ago

correct! But i think in your sample a and b would be excecuted synchronous, or not?

Hemanth Raj Over a year ago

Yes, first a will be called then b

Flo Over a year ago

Okay, but i need it asynchronous, in youre example both would be excecuted simultaneously, but i need b after a is done.

|

Collectives™ on Stack Overflow

How to set a callback function in javascript

4 Answers 4

3 Comments

5 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related