How to call a function within the setTimeOut() method by passing parameters?

Asked

Viewed 94 times

3

For example, below I have two buttons that when clicked display different contents:

let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");

btn1.onclick = () => {
    console.log("BOTÃO 1");
};

btn2.onclick = () => {
    console.log("BOTÃO 2");
};
<button id="btn1">Click 1</button>
<button id="btn2">Click 2</button>

But if I want to call the method log() after a few seconds with the method setTimeout() passing parameters in the function to be called in the method setTimeout(), That’s not gonna work:

let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");

btn1.onclick = () => {
    setTimeout(msg("BOTÃO 1"), 1000);
};

btn2.onclick = () => {
    setTimeout(msg("BOTÃO 2"), 1000);
};

function msg(txt) {
    console.log(txt);
}
<button id="btn1">Click 1</button>
<button id="btn2">Click 2</button>

That’s because I’m calling the job msg() immediately, because I informed the parentheses. How can I pass parameters to function to be called in the method setTimeout()?

javascript

2 answers

2

Just like that, right?

btn1.onclick = () => {
    setTimeout(() => msg("BOTÃO 1"), 1000);
};

btn2.onclick = () => {
    setTimeout(() => msg("BOTÃO 2"), 1000);
};

https://jsfiddle.net/5sgwnk0u/

The setTimeout expects a callback function, but the msg function returns nothing (void) and will give error saying it expects a function like callback.

2

The two best ways to solve this issue are: first by creating a function in the setTimeout() and that this function flame to function in which you want her to exercise, in this case the msg(txt).

Already the second way, in which is what I recommend and the most practical is, the setTimeout receives a third parameter that is sent as a parameter to the function at the end of the stopwatch. *But you have to create a variable or send the String as parameter at the end of the setTimeout hassle-free. Example:

setTimeout(function, 1000, param1, param2, parametros...);

OPTION 1:

let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");

btn1.onclick = () => {
     setTimeout(()=> { msg("BOTÃO 1")}, 1000);
};

btn2.onclick = () => {
    setTimeout(() => { msg("BOTÃO 2")}, 1000);
};

function msg(txt) {
    console.log(txt);
}
<button id="btn1">Click 1</button>
<button id="btn2">Click 2</button>

OPTION 2: 

let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");

btn1.onclick = () => {
    var txt = "BOTÃO 1"
    setTimeout(msg, 1000, txt);
};

btn2.onclick = () => {
    var txt = "BOTÃO 2"
    setTimeout(msg, 1000, txt);
};

function msg(txt) {
    console.log(txt);
}
<button id="btn1">Click 1</button>
<button id="btn2">Click 2</button>

What could also be in Option 2:

    btn1.onclick = () => {
    setTimeout(msg, 1000, "BOTÃO 1");
};

btn2.onclick = () => {
    setTimeout(msg, 1000, "BOTÃO 2");
};

I hope I’ve helped.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.