Javascript functions in series

Question

I am using a function first which adds a class that causes the page to fade to 0 on clicking an anchor tag. How would I add the following...

if style = opacity "0" (in other words function one has successfully completed) add the next function. The code is given below.

They both run independently from there respective triggers but not sure how to ensure that function two runs only on completion of the first.

document.getElementsByTagName("a")[1].addEventListener("click", first);
function first() {
    "use strict";
    document.getElementById("content").classList.add("animation")
}

function next() {
    "use strict";
    document.getElementById("profile").classList.add("animation");
}

What is happening on adding `animation` class. Is there is any css animation in it? — Manwal, Oct 30 '15 at 08:17
I'm new to coding how would I implement that, sorry if this is a really simple question. — Darren, Oct 30 '15 at 08:18
what you want clicking on `a` tag will run function `first()` and once that is done you want to run `next()`? — Deepak Biswal, Oct 30 '15 at 08:19
Darren, have you tried JSfiddle? Its a practice location so you can show us what you've tried. — zipzit, Oct 30 '15 at 08:20
Hint: listen for the [`transitionend` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) on the element that is doing a CSS transition. — jfriend00, Oct 30 '15 at 08:36

score 0 · Accepted Answer · answered Oct 30 '15 at 08:34

document.getElementsByTagName("a")[1].addEventListener("click", function(){
   document.getElementById("content").add('animation');
   next();
});

function next(){
 if (document.getElementById("content").contains('animation')) {
     document.getElementById("profile").classList.add('animation');
 } else {
   return false;
}

}

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

I recommend you to use JQuery, it is much more easier to manipulate css attributes and stuffs. And for pure javascript, I think it was already answered here, it might not be straight answer, but it might help you out.

Use callback functions

function func(value, callback){
  //do stuff
  callback();
}

In your case

function first(alphavalue, second) {
    // do some stuffs
    if(alphavalue == 0) {
    // run the call back
        second();
    }else { // do no stuffs }
}

Hope it helps!!

edited May 23 '17 at 10:27

Community

1
1

answered Oct 30 '15 at 08:34

Gabriel

49
2
2
10

I agree with Gabriel. Might be easier to use jQuery. Here is a sample: http://jsfiddle.net/mqeLg445/ . – bulanmaster Oct 30 '15 at 08:41

score -1 · Answer 3 · edited May 23 '17 at 10:27

-1

$("#content").on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", 
function(event) {
   // Do something when the transition ends
   next();
});

Check transition end event handling and this.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 30 '15 at 08:38

thecodeparadox

86,271
21
138
164

Javascript functions in series

3 Answers3