JavaScript Timeout Function

Question

I was looking in other posts for the answer, but the answers never seem to work in my favor. I'm trying to make an image fade when the page finishes loading. I've figured out I can loop until the counter reaches 0 (when image is invisible) and fade the image slowly.

The problem is, the setTimeout() function doesn't seem to be working. Here's the code:

function timeout() {
    setTimeout(function () {
      //A comment said something about looping,
      //but it was confusing to understand...
    }, 50);
}

function setup() {
  var load = document.getElementById('img');
  load.style.opacity = 0 //Start at being visible
  for (var i = 10; i > 0; i = i - 0.1) { //For loop
    load.style.opacity = i; //Use the index variable and use that to set the opacity
    setTimeout(); //Set the timeout, but this function does not pause the program for some reason...
    //I need to pause for 0.05 seconds.
  }
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
    </head>
    <body>
      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>
    </body>
</html>

I put the javascript in a seperate file, I just can't access it from Stack Overflow...

Can someone help? And also, sometimes the image can be finicky at times as well, like sometimes it won't hide like it's supposed to do. Thanks!

Even if you were calling timeout, that won't make it pause until it's finished. The callback you're giving to setTimeout will run after that period of time but the rest of your code will continue running as normal. You'll still be setting load.style.opacity = 0 almost instantly. — Mike Cluck
– Mike Cluck, Commented Feb 7, 2017 at 14:58

Philip Eagles · Accepted Answer · 2017-02-07 15:12:33Z

2

You declared a setTimeout without arguments, hence the error:

'Window': 1 argument required, but only 0 present."

Give it the appropriate amount of arguments:

for (var i = 10; i > 0; i = i - 0.1) { //For the loop
    load.style.opacity = i; 
    setTimeout(functionName, milliseconds); 
}

If you intended to use your timeout() function instead, call it. You're just instantiating a new setTimeout from the one you already created in the timeout() function.

edited Feb 7, 2017 at 15:12

Philip Eagles

9582 gold badges9 silver badges27 bronze badges

answered Feb 7, 2017 at 14:56

Joshua

6497 silver badges18 bronze badges

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

2 Comments

Ben Stafford Over a year ago

I noticed that there was an error, but I had already posted it :(

Joshua Over a year ago

Then feel free to mark one of ours as the answer, and call it a day. Next time, make absolutely sure there aren't any errors - the console is your best friend! :)

Weedoze · Accepted Answer · 2017-02-07 15:06:11Z

1

You can use a recursive function instead of a loop

var load = document.getElementById('img');

function setup() {
  load.style.opacity = "1"; //Start at being visible

  timeout(1);
}

function timeout(i) {
  setTimeout(function() {
    i -= 0.1;
    if(i<=0)
      return;
    load.style.opacity = i.toString();
    timeout(i);
  }, 200);
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

<!DOCTYPE html>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div>
    <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150" id="img">
  </div>
</body>

</html>

answered Feb 7, 2017 at 15:06

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Comments

rasmeister · Accepted Answer · 2017-02-07 16:04:46Z

1

Basically you want to countdown the opacity with a recursive call. Here we are going from 1 down to 0 in 0.01 increments. The setTimeout will trigger the next recursive call after pausing for 50 msecs. These values, can of course, be adjusted as needed but the opacity needs to be a number from 1 (visible) to 0 (invisible).

function setOpacity(el, lvl) {
 el.style.opacity = lvl;
}

function countDown(el, lvl) {
  function action(el, lvl) {
    return function () {
      countDown(el, lvl);
    }
  }
  setOpacity(el, lvl);
  if (lvl > 0) {
    lvl -= 0.01
    setTimeout(action(el, lvl), 50);
  }
}

function setup() {
  var load = document.getElementById('img');
  load.style.opacity = 1; //Start at being visible
  countDown(load, 1);
}

window.addEventListener('load', setup, true);

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
    </head>
    <body>
      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>
    </body>
</html>

edited Feb 7, 2017 at 16:04

answered Feb 7, 2017 at 15:02

rasmeister

2,0061 gold badge14 silver badges19 bronze badges

1 Comment

rasmeister Over a year ago

No problem, Ben. It is a little more verbose than some of the other answers but I thought that might help you get your head around what is going on. You can speed it up by changing the second parameter in the setTimeout from 50 to, say 10. That will make the fade 5 times faster. This number is the number of milliseconds that the image will stay at its current opacity level.

Laurianti · Accepted Answer · 2017-02-07 15:04:28Z

0

function setup() {
	var load = document.getElementById('img');
	(function(){
		var i = 1;
		setTimeout(function () {
			i -= 0.1;
			load.style.opacity = i;
			if (i > 0) {
				setTimeout(arguments.callee, 100);
			}
		}, 100);
	})();
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>

answered Feb 7, 2017 at 15:04

Laurianti

9751 gold badge6 silver badges20 bronze badges

2 Comments

Ben Stafford Over a year ago

Can you please explain more about this?

Laurianti Over a year ago

Of course, this is a recursive function. arguments.callee is the same caller function. arguments is è object which contains properties about the function, I hope i explained it, sorry for my bad English

Collectives™ on Stack Overflow

JavaScript Timeout Function

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related