Create a loop for a javascript code [closed]

Answer 1

Before answering your actual question, I provide you a more proper solution to solve your fading issue since you try to do it overly complicated.

You should just modify the actual value and re-assign it to the style, no need to invoke all that methods and re-query the DOM.

function fadeIn( node, v ) {
    node.style.opacity = v || 1;

    if( v < 1 ) {
        setTimeout( fadeIn.bind( null, node, v + 0.1 ), 25 );
    }
 }

function fadeOut( node, v ) {
    node.style.opacity = v || 1;

    if( v > 0 ) {
        setTimeout( fadeOut.bind( null, node, v - 0.1 ), 25 );
    }
}

This is a pretty basic example of one way to accomplish the task. You can call it like

fadeOut( document.getElementById("myDiv") );

It's maybe an even better idea to let the browser / css transitions do the job, if don't need to support legacy browsers with animations. That could look like

function fadeIn( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 1;
}

function fadeOut( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 0;
}

Be aware that you might want to not just set transition, but also all the specific browser vendor prefixes like -ms-transition, -moz-transition, etc. for "not so legacy" browsers aswell.

---

To finally answer the question, you should use an Array to loop over multiple functions, this might look like

[ fade90, fade80, fade70, fade60,
  fade50, fade40, fade30, fade20,
  fade10, hide ].forEach(function( method, i, arr ) {
      setTimeout(function() {
          if( typeof arr[ i+1 ] === 'function' ) {
              !i && method();
              setTimeout( arr[ i+1 ], 25 * i );
          }
      }, 25);
});

Be aware that you also should re-write those methods also, those should not call setTimeout for themselfs, also they should not re-query for the target node. I just wanted to give you an example of my approach.

Answer 2

Not sure what you are asking, but may I suggest something a little tidier?

function fade(n, el) {
  el.style.opacity = n;
  n = n - 0.1;
  if (n.toFixed(1) > 0) {setTimeout(function() {fade(n, el);},100);}
  else {setTimeout(function() {hide(el);}, 100);}
}

function hide(el) {
  el.style.visibility='hidden';
}

and then initially call

fade(0.9, document.getElementById("myDiv"));

eg: http://jsfiddle.net/XY4yM/