Why Parameter Stops Function When Added

Question

I have a code which I am trying to execute using a parameter in the function, ie -

function startFadeEffect(elem){ };

I have made the elem equal to a variable b in the global scope, where b is an array of images. Meaning -

var elem = b[imgNumb];

imgNumb is a variable which is globally "0" and inside a function is defined as

imgNumb = imgNumb + count;

Now, my current code "without" the parameter works perfect -

function startFadeEffect(){
    var opacSetting = noOpac / 10;
    b[imgNumb].style.opacity = opacSetting; 
    b[imgNumb].style.display = "block";
    noOpac++;
    if(noOpac < 0){
        opacSetting = 0;    
    }
    if(opacSetting == 1){
        clearTimeout(timer);
        b[imgNumb].style.opacity = 1;
        noOpac = 0;
        return false;
    }
    var timer = setTimeout(startFadeEffect, 75);
}

However, when I use the parameter like this it does not work for me :(

function startFadeEffect(elem){
    var opacSetting = noOpac / 10;
    elem.style.opacity = opacSetting;   
    elem.style.display = "block";
    noOpac++;
    if(noOpac < 0){
        opacSetting = 0;    
    }
    if(opacSetting == 1){
        clearTimeout(timer);
        elem.style.opacity = 1;
        noOpac = 0;
        return false;
    }
    var timer = setTimeout(startFadeEffect(elem), 75);
}

Please note I have already defined the elem variable in the global scope of the file. Also, I am only looking for a JS solution no library like JQuery! Thanks

Answer 1

This part is incorrect:

setTimeout(startFadeEffect(elem), 75);

It should be:

setTimeout(function () {
    startFadeEffect(elem);
}, 75);

---

setTimeout expects a function as it's first argument. startFadeEffect(elem) is executed immediately (and doesn't return a function). So what happens is that startFadeEffect calls itself recursively until opacSetting == 1 which breaks the recursion.