Using Javascript Varibles Without Calling Functions In Them

Question

I am currently devolving a little slideshow, thing that automatically moves fades in and out the background-images. (opacity as well.) My issue is that I am trying to use variables to store code to run, as setTimeout is stubborn, and won't run with anything in parentheses in it. (as well I need to use them, or my code will get really messy..ier) What I currently have is

imgID = 0;
// window.setInterval(nextSLIDE, 1000);
nextSLIDE();

function nextSLIDE( step2 ) {
 slideVAR = "slide" + imgID;
    window.setTimeout(imgIDchange(), 50);
    test2 = window.setTimeout(changeOpacityNINE);
    tes5t = window.setTimeout(changeOpacity8, 100); // If you are wondering about the irradical names, that is because I made them all non-unique earlier, and I got lazy, so I made them unique..
    test4 = window.setTimeout(changeOpacity7, 200);
    test6 = window.setTimeout(changeOpacity6, 300); 
    tes6t = window.setTimeout(changeOpacity5, 400); 
    twest = window.setTimeout(changeOpacity4, 500); 
    testt = window.setTimeout(changeOpacity3, 600);
    testyt = window.setTimeout(changeOpacity2, 700);
    teswt = window.setTimeout(changeOpacity1, 800);

}
function imgIDchange() {
 imgID = imgID + 1;
}


function changeOpacity( opacity ) {
 document.getElementById("headerIMG").style.opacity = opacity;
}


var changeOpacityNINE = changeOpacity(0.9);
var changeOpacity8 = changeOpacity(0.8);
var changeOpacity7 = changeOpacity(0.7);
var changeOpacity6 = changeOpacity(0.6);
var changeOpacity5 = changeOpacity(0.5);
var changeOpacity4 = changeOpacity(0.4);
var changeOpacity3 = changeOpacity(0.3);
var changeOpacity2 = changeOpacity(0.2);
var changeOpacity1 = "changeOpacity(0.1);"
var FULL = changeOpacity(1)

And I am looking for a way to make it either

A) Work, and not run the varibles.
B) Or find some sort of other Work around..

If my design is that horrific, and makes your eyes bleed feel free to tell me how I can redo it, but I would rather not redo it all in general. (I am rather lazy..)

So what you're really asking is how to call a function with `setTimeout` **and** pass arguments to that function, right? — Mike Cluck, Oct 03 '16 at 21:57
You're looking for closures. Have a look at [this example](http://stackoverflow.com/q/10348255/1048572) — Bergi, Oct 03 '16 at 21:58
If you are rather lazy in general, you should redo your code and use a loop instead of repeating everything :-) — Bergi, Oct 03 '16 at 21:59
Definately outsource the transition in opacity, instead of repeating the code 100 times. — , Oct 03 '16 at 22:00
I'm still trying to figure out why you're using javascript for this.. You can transition the background image with pure CSS, you know that right? — mhodges, Oct 03 '16 at 22:03
`window.setTimeout(imgIDchange(), 50);` executes the function immediately. You may want to learn about what a [function reference](http://stackoverflow.com/q/15886272/5743988) is. — 4castle, Oct 03 '16 at 22:04
Oh yeah, I completely forgot about that... Well, that was 40 minutes wasted.. — Andrew Humphreys, Oct 04 '16 at 01:22

score 4 · Answer 1 · answered Oct 03 '16 at 21:59

4

If I understand you correctly, you want to call setTimeout with a function and pass arguments to it?

If so, you can simply add the arguments to the end of your setTimeout call. So if you wanted to call

changeOpacity(0.5);

after 1000 ms, then you would use setTimeout like this:

setTimeout(changeOpacity, 1000, 0.5);

answered Oct 03 '16 at 21:59

Frxstrem

38,761
9
79
119

1

For some reason passing arguments to the `setTimeout` callback as a third argument is not very reliable. I've seen it not working time to time but just couldn't figure out why. It might be safer to do like `setTimeout(changeOpacity.bind(this,0.5), 1000);` – Redu Oct 03 '16 at 22:20
@Tobiq Pretty much [all browsers](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Browser_compatibility) (with the exception of IE9 and below, which is [less than 1%](http://caniuse.com/usage-table) of browsers) support extra arguments to `setTimeout`. – Frxstrem Oct 03 '16 at 22:29
`I think *some* browsers only accept 1 argument – Tobiq` – Oct 03 '16 at 23:11

score 3 · Answer 2 · answered Oct 03 '16 at 21:59

3

With setTimeout, the arguments are as follows:

setTimeout(callback,delay,args);

so you can simply do:

setTimeout(changeOpacity,*DELAY*,0.7); // etc...

answered Oct 03 '16 at 21:59

Using Javascript Varibles Without Calling Functions In Them

2 Answers2