Question

I am trying to fiddle around and create a little fadeOut function in JavaScript,
This is what I came up with:

function fadeOut(id, time){
  var elem = document.getElementById(id);
   elem.style.opacity = 1;
   var opc = 1;
   while(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
   }
   elem.style.opacity = 0;
}

But this will not show the div’s opacity in “real-time” but rather the end result, which is opacity = 0;
I’ve tested it out here:

fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;

It would take it a long time to calculate and only when it finishes it will dump the result,
not showing it seamlessly, while calculating,
How can I resolve this?

Answer 1

You need to set timers, as, until your function is done and the event handler can run, the UI won’t be updated.