Failure in execution of setInterval

Question

if(inputUser.value == '' || inputPass.value == ''){
    setInterval(changeColor("blue"), 3000);
    alert('Tudo em branco');
}
function changeColor(cor){
    var prm = "1px solid "+cor;
    inputUser.style.border = prm;
}

When I enter a parameter in the function changeColor, the setInterval does not behave as expected, not respecting the 3 seconds. Because this happens?

Answer 1

From the way placed it is calling the function directly, the correct is:

setInterval(function() {
    changeColor("blue")
}, 3000);

Answer 2

You have to take into account 3 different concepts:

• declare a function
• call the function (you can say "run" or "call" the function too)
• go by reference

Declare the function

When you declare a function you are leaving the same:

function teste(nome){
    nome = nome || '';
    return 'Olá ' + nome + ', hoje está um lindo dia!';
}

Right now you’re not running the function, just saying how it’s done.

Invoke the function

There are different ways to invoke the function, the most common is

var saudacao = teste('João');

Parentheses are the "order" to run the function. That way you pass an argument to the function, it runs the code that was written and returns a string "Olá João, hoje está um lindo dia!". The function is "consumed" and leaves in its place the string. That is to say the variable saudacao will receive the value of string.

If the function does not have return she will return undefined.

(This is what you’re doing in setInterval! running the function and passing undefined for the setInterval);

Reference

You can pass a function by reference. That is, enter its name, without running it. For example, when you want to run a function in a setInterval, or by the difterent event receiver:

window.addEventListener('mousedown', minhaFn);
window.addEventListener('touchstart', minhaFn);

This way both events use the same function.

The problem with your code:

Your problem is that you are invoking a function that is consumed immediately before it is used in setInterval. The function is consumed and , because there is no`-turn; what happens is

setInterval(undefined, 3000);

What you should do:

setInterval(changeColor, 3000);

or, passing a statement at the time:

setInterval(function(){
    var prm = "1px solid "+cor;
    inputUser.style.border = prm;
}, 3000);

But as you can see there is a problem in the code. Do not go to color you need. You can solve this with a gambit (http://jsfiddle.net/k8gjre09/):

setInterval(changeColor.bind("blue"), 3000);
function changeColor() {
    var prm = "1px solid " + this;
    alert(prm);
}

When you use .bind('blue') you are defining the value of this within the function.

You can use it like this:

setInterval(function() {
    changeColor('blue');
}, 3000);

running the function every 3 seconds.

But what you should do, since it’s always the same color, is change the code to change color by changing the color name in another way.