setTimeOut error Uncaught Referenceerror: lightning_one is not defined

Question

I created a Function to generate display effect for a certain time, the images are loaded only in the page load, then Uncaught ReferenceError: lightning_one is not defined as shown below:

the functions are those:

function lightning_one(t) {
    $('#container #lightning1').fadeIn(250).fadeOut(250);
    setTimeout('lightning_one()', t);
}
function lightning_two(t) {
    $('#container #lightning2').fadeIn('fast').fadeOut('fast');
    setTimeout('lightning_two()', t);
}
function lightning_three(t) {
    $('#container #lightning3').fadeIn('fast').fadeOut('fast');
    setTimeout('lightning_three()', t);
}

lightning_one(4000);
lightning_two(5000);
lightning_three(7000);

Remember that the images only load after the page is displayed after the console error and displayed and the images are no longer displayed. The idea they keep repeating according to the given time. Where am I going wrong?

Answer 1

You are playing your function as if it was a string!

Must pass t also as second argument in function otherwise it will not wait the 4 seconds !

function lightning_one(t) {
    $('#container #lightning1').fadeIn(250).fadeOut(250);
    setTimeout(lightning_one, t, t);
}

EDIT :

An idea to perform the 3 functions:

function minha_funcao() {
    setTimeout(ligntning_one, 2000) 
    setTimeout(lightning_two, 4000) 
    setTimeout(lightning_three, 6000) 
}


function lightning_one() {
        $('#container #lightning1').fadeIn(250).fadeOut(250);
    }

function lightning_two() {
    $('#container #lightning2').fadeIn('fast').fadeOut('fast');
}

function lightning_three() {
    $('#container #lightning3').fadeIn('fast').fadeOut('fast');

//se quiser loopar
    minha_funcao();

}

minha_funcao();