Este não é apenas mais um artigo tentando explicar como o debounce ou a limitação funciona no nível do código, em vez disso, é uma ilustração para lembrar e visualizar o conceito para que você possa praticamente aplicá -los em seu trabalho.

pessoalmente, muitas vezes me pego esquecendo os conceitos de debouscing e aceleração, então quando alguém me pede para explicá -los - ou se uma pergunta surgir em uma entrevista - eu apenas piscar? Para evitar isso, fiz uma página simples para ajudar a atualizar minha memória. Se você não quer se sentir como um impostor, acompanhe?

No codepen abaixo, definei o atraso para 2 segundos para debounce e acelerador. Tente clicar em itens alimentares aleatórios e dar uma pausa.

Índice

• A analogia do restaurante
• Explicação
  • Por que debounce ou acelerador afinal?
  • manipulador de eventos JS
  • O que está errado ?
  • Debounce
  • Throttle

link para página

Link do github

Analogia do restaurante

imagine que você está em um restaurante e deseja pedir comida, para escolher o menu da mesa e começar a ler todos os itens. (Na página da web que compartilhei, clicar em diferentes itens alimentares será equivalente à leitura do item de menu)

A analogia aqui

• ? Lendo alimento item =? Botão Clique em
• ? ‍? Garçom indo para cozinha =? API Call

e imagine que existem três tipos diferentes de garçons no restaurante que poderiam atendê -lo:

1. ? ‍♂️ garçom normal

   • toma nota toda vez que você menciona um item
   • é executado para a cozinha para cada item individual
   • como JS lidando com cada evento imediatamente

2. ? Garçom debounced

   • Quando você começar a ler o menu, ele estará esperando que você faça uma pausa por pelo menos 2 segundos antes de receber o pedido.
   • gosta de esperar que um usuário termine de digitar antes de fazer uma chamada de API

3. ? ‍? Garçom acelerado

   • recebe pedidos apenas uma vez a cada 2 segundos
   • Se você mencionar vários itens nesses 2 segundos, todos eles irão na mesma ordem
   • como as chamadas da API limitando a cada x segundos, independentemente da atividade do usuário

Nota: A principal diferença é:

• Debouncing: aguarda a atividade (clique no botão) para parar por um tempo especificado para acionar
• aceleração: gatilhos em intervalos regulares, independentemente de quando uma atividade é interrompida
• também 2 seg é apenas algo que eu usei como exemplo, pode ser qualquer tempo

Explicação

Por que debounce ou acelerador, afinal?

Antes de entender o Debounce ou o acelerador, precisamos saber por que eles são usados ​​em primeiro lugar. Para saber que vamos entender o comportamento dos manipuladores de eventos JS

Manipuladores de eventos em JS

No JS, os manipuladores de eventos são apenas funções que executam quando ocorrem eventos específicos (como cliques, digitação ou rolagem). Por padrão, esses manipuladores disparam toda vez que o evento acontece - todo pressionamento de tecla, cada clique ou movimento de rolagem.

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

O que está errado?

diga, por exemplo, você tem um botão que faria uma chamada de API

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

A função acima executará o makeapicall () em cada botão Clique em (ou seja) se você conseguir pressioná -lo 10 vezes dentro de 1 seg, adivinhe o que você fez 10 chamadas de API em 1 seg. este é o comportamento padrão.

, mas disparar uma chamada de API toda vez para um evento pode ser ineficiente e, na maioria das vezes, não é isso que você está procurando. É aqui que a limitação e o debouncing entram na foto.

se você deseja tirar uma definição deste artigo, pode ser este. estrangulamento e debouncing são duas maneiras mais comuns de controlar a taxa de resposta de um ouvinte de evento.

Debouncing

Eu não vou explicar o código para debounding, pois isso pode ser importado do lodash, mas veremos onde você pode realmente usá -lo.

use debouning quando quiser fazer a API Chamada somente se o usuário parar de digitar por um certo período de tempo ou parou de clicar por um certo período de tempo.

Em nosso exemplo, se o usuário continuar clicando no botão, mesmo por 5 minutos, a chamada da API será feita apenas uma vez.

Então, duas coisas estão acontecendo aqui:

• o usuário precisa parar de clicar.
• Pare de clicar em Mea

Acelerar

o acelerador é como um intervalo. Use isso quando você não quiser esperar até que o usuário pare, em vez de fazer uma chamada de API em cada intervalo, digamos 2 segundos

Exemplo Se o usuário estiver digitando por 1 minuto direto sem fazer uma pausa, então a cada 2 seg que você chamaria a API.

Conclusão

Como mencionado no artigo, isso não é para explicar como as funções funcionam para visualizar e entender por que é usado. Eu certamente recomendo que você entenda no nível do código como eles funcionam, mas pessoalmente ainda usariam o Debounce e o acelerador fornecidos pela Lodash Library e não reinventarem a roda.

Se você gosta do artigo deixar um polegar para cima, isso realmente me motivaria a escrever mais. Obrigado ?.