O que está debouscing em JavaScript?

Você já clicou em um botão de uma página da web e parece que está demorando muito tempo para carregar conteúdo. Da mesma forma, ao digitar na barra de pesquisa, a pesquisa requer um breve atraso para mostrar os resultados. Mesmo se você nunca sentiu, deixe -me dizer que os desenvolvedores usaram a função Debounce Para alcançar esse atraso e esse atraso é muito útil quando se trata de parar de solicitações desnecessárias para o servidor.

Por exemplo, se você definiu uma função na janela redimensiona e agora imagine chamar a função continuamente enquanto redimensionamos nossa janela. É uma maneira eficiente de fazer isso? É claro que não porque chamar essa função específica continuamente é desnecessária e, portanto, afetaria o desempenho.

Nesta postagem, falaremos sobre o que está debitando em JavaScript e sua implementação com alguns exemplos.

O que é debouncing?

A definição mais simples de debouscing seria que é uma técnica de programação destinada a restringir o chamado de uma função demorado (mais cálculos) com frequência ou apenas aciona uma função quando necessário. Suponha que você seja um desenvolvedor e esteja criando uma barra de pesquisa. Você gostaria de mostrar sugestões apenas quando o usuário terminar de digitar o que significa que não está em cada pressionamento de teclas. Portanto, usando o debouncing em JavaScript, pode -se melhorar o desempenho de sua página da web.

Como funciona o debounding? Bem, se eu colocá -lo em palavras simples, então debouscing funciona colocando um cronômetro de "espera" antes da execução de um pedaço específico de código. E se, devido a alguma situação, o mesmo processo for reexecionado. Então, em vez de formar uma fila de dois mesmos eventos, paramos o processo antigo e focamos apenas na execução do recente. Isso também nos salva de uma situação de "decote de garrafa". Para aqueles que não estão familiarizados com o "gargalo", é um estado que ocorre quando você está tentando empurrar mais coisas na tela do que o poder de processamento do servidor

Implementação debounteling

Podemos implementar Debounce em JavaScript usando as etapas abaixo:

• Crie um cronômetro de atraso dentro da função e defina -o para 0
• Redefina o cronômetro se a função especificada for invocada novamente
• Ligue para a função de debounce somente quando o tempo limite.

Parte de codificação HTML

A primeira etapa na implementação do Debounce no JavaScript exigirá um elemento HTML no qual atribuiremos o evento de clique.

Primeiro, crie um elemento de botão em HTML:

Clique em mim

A tag de script é usada para fazer referência ao arquivo onde escreveremos nosso código JavaScript que é código.JS. Nós também usamos o eu ia atributo que usaremos para referenciar o elemento do botão de HTML em JavaScript.

Agora que terminamos com a parte de codificação HTML, vamos implementar a função Debounce em JavaScript.

JavaScript Coding Part

A função para a implementação da técnica de debounce seria assim:

// Obtenha referência do botão
var mybtn = documento.getElementById ("mybtn");
// função de debounce definida
const debounce = (myfunc, atraso) =>
Deixe Debouncetimer;
Return function ()
const context = this;
const args = argumentos;
ClearTimeout (Debouncetimer);
debouncetimer = setTimeout (() => myfunc.aplicar (contexto, args), tempo de atraso);


// Adicione um ouvinte de evento ao botão
mybtn.addEventListener ('click', debounce (function ()
// alerta será visto após dois segundos de tempo
alerta ("Hello World após 2 segundos");
, 2000));

No código acima, primeiro, obtemos a referência do botão especificado no HTML e adicione um evento de clique neste botão. Cada clique do botão invocaria a função de debounce.

No Debounce função, estamos fazendo dois argumentos, o primeiro é a função e o segundo é o tempo de atraso ou o tempo de tempo limite. Então inicializamos o Debouncetimer que rastreará o período de atraso.

Quando um usuário clica no botão uma vez, a função de debounce será chamada após o atraso.

Portanto, se o usuário clicar no botão e depois clicar novamente no botão antes do final do atraso, o timer é redefinido e o atraso inicial será limpo.

Toda essa funcionalidade é alcançada pela função ClearTimeout ().

Vamos ver a saída:

Podemos ver que, quando estamos clicando no botão, repetidamente não vemos nenhuma saída. No entanto, quando clicamos no botão da última vez e o deixamos, vimos a mensagem de alerta depois de dois segundos. Portanto, podemos concluir que Cada clique chama a função de debounce e redefine o cronômetro que atrasa a chamada.

Conclusão

Debouncing é uma técnica de programação usada pelos desenvolvedores para limitar o número de chamadas a um evento ou acionar apenas uma função quando necessário ou para apenas um caso de uso. A técnica de debouscing é aplicada em uma função demorada que possui muitos cálculos, por isso evitamos o chamado desnecessário dessa função. Para ser específico, o debouncing pode ser aplicado em barras de pesquisa, barras de texto sugestivas, páginas da web de carregamento de conteúdo e.G Facebook, Instagram, e assim por diante.

Neste post, discutimos o que é debouning em JavaScript e demos uma olhada em seu trabalho e implementação em JavaScript.