As funções de retorno de chamada são uma técnica de programação comum usada para lidar com situações como operações assíncronas e manipulação de eventos. Uma função de retorno de chamada é essencialmente uma função chamada para processar a lógica relacionada quando ocorre um evento ou uma operação assíncrona é concluída . A seguir, uma explicação detalhada da função de retorno de chamada:
Definição da função de retorno de chamada
Uma função de retorno de chamada é uma função que é passada como um argumento para outra função e que é chamada quando essa função é concluída. As funções de retorno de chamada podem ser funções anônimas ou funções nomeadas.
O papel da função de retorno de chamada
- As funções de retorno de chamada geralmente são usadas para lidar com operações assíncronas, como:
setTimeout(function() {
console.log('Hello, world!');
}, 1000);
Neste exemplo, a função setTimeout chamará a função de retorno de chamada após 1 segundo, gerando "Hello, world!".
- As funções de retorno de chamada também podem ser usadas para lidar com eventos, por exemplo:
document.addEventListener('click', function() {
console.log('Button clicked!');
});
Neste exemplo, quando o usuário clicar em um elemento no documento, a função de retorno de chamada será chamada, gerando "Botão clicado!".
Vantagens e desvantagens das funções de retorno de chamada
A vantagem das funções de retorno de chamada é que elas podem lidar com situações como operações assíncronas e processamento de eventos, tornando os programas mais flexíveis e confiáveis.
A desvantagem das funções de callback é que elas podem levar ao callback hell (Callback Hell), ou seja, aninhar muitas funções de callback, tornando o código difícil de ler e manter. Para evitar callback hell, técnicas como Promise e async/await podem ser usadas para gerenciar operações assíncronas.
Exemplo de uma função de retorno de chamada
Aqui está um exemplo de uso de uma função de retorno de chamada para carregar imagens de forma assíncrona:
function loadImage(url, callback) {
var img = new Image();
img.onload = function() {
callback(null, img);
};
img.onerror = function() {
callback(new Error('Failed to load image at ' + url));
};
img.src = url;
}
loadImage('https://example.com/image.jpg', function(err, img) {
if (err) {
console.error(err);
} else {
console.log('Image loaded successfully!');
document.body.appendChild(img);
}
});
Neste exemplo, a função loadImage é usada para carregar a imagem de forma assíncrona e chamar a função de retorno de chamada para lidar com a lógica relacionada após a conclusão do carregamento. O primeiro parâmetro da função callback é usado para passar a mensagem de erro, e o segundo parâmetro é usado para passar os dados da imagem carregada. No exemplo, adicionamos a imagem carregada ao documento.
Exemplo de código básico
let val=123;
function aaa(val,callback){
if(val>100){
callback(val)
}else{
callback(false)
}
}
aaa(val,function(e){
console.log(e); //123
})