3

Por exemplo, abaixo tenho dois botões que quando clicados exibem conteúdos diferentes:

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>

Mas, se eu quiser chamar o método log() após alguns segundos com o método setTimeout() passando parâmetros na função a ser chamada no método setTimeout(), isso não vai funcionar:

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>

Isso porque estou chamando a função msg() imediatamente, pois informei os parênteses. Como eu posso passar parâmetros para função a ser chamada no método setTimeout()?

2 Respostas 2

2

Exatamente assim, certo?

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

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

https://jsfiddle.net/5sgwnk0u/

O setTimeout espera uma função de callback, mas a função msg não retorna nada (void) e vai dar erro dizendo que ele espera uma função como callback.

2

Os dois melhores jeitos de resolver para resolver esta questão são: primeiro criando uma function no setTimeout() e que essa function chama a function na qual que você quer que ela exerce, nesse caso a msg(txt).

Já o segundo jeito, na qual é o que mais recomendo e o mais prático é, o setTimeout recebe um terceiro parâmetro que é enviado como parâmetro para a function ao final do cronômetro. *Porém você terá de criar uma variável ou envia a String como parâmetro no final do setTimeout sem problemas. Exemplo:

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

OPÇÃO 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>

OPÇÃO 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>

O que também poderia ser na Opção 2:

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

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

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.