SetInterval execution failed

1
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 changeColor function, the setInterval does not behave as expected, not respecting the 3 seconds. Why does this happen?

    
asked by anonymous 15.06.2015 / 01:27

2 answers

2

You have to take into account 3 different concepts:

  • declare a function
  • invoking function (you can say "run" or "call" function as well)
  • pass by reference

Declare the function

When you declare a function you are defining it:

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

At this point you are not running the function, just to say how it is done.

Invoke function

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

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

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

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

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

Pass by reference

You can pass a function by reference. That is to say the name of it, without running the same one. For example, when you want to run a function in a setInterval, or by a different event listener:

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

In this way both events use the same function.

The problem in 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 it has no return 'what happens is

setInterval(undefined, 3000);

What you should do:

setInterval(changeColor, 3000);

or, passing a statement at the moment:

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

But as you see there is a problem in the code. Do not pass the color you need. You can solve this with a gambiarra ( link ):

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

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

You can use this:

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

that runs the function every 3 seconds.

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

    
15.06.2015 / 09:42
2

Of the placed form it is calling the function directly, the correct one is:

setInterval(function() {
    changeColor("blue")
}, 3000);
    
15.06.2015 / 01:30