Otimizando o desempenho do JavaScript com Debouncing e Throttling: exemplos de código e práticas recomendadas

Debouncing e throttling são dois conceitos importantes em JavaScript usados ​​para otimizar o desempenho de determinadas ações, especialmente aquelas acionadas por interações do usuário. Neste artigo, exploraremos o que são esses conceitos, como eles funcionam e forneceremos trechos de código para demonstrar sua implementação.

Debouncing

Debouncing é uma técnica que atrasa a execução de uma função até que um determinado período de tempo tenha passado desde a última vez que ela foi chamada. É comumente usado para evitar que uma função seja chamada várias vezes em rápida sucessão, especialmente em resposta à entrada do usuário.

Digamos que você tenha uma barra de pesquisa em seu site que sugere resultados de pesquisa à medida que o usuário digita. Cada vez que uma tecla é pressionada, uma chamada de API é feita para recuperar os resultados da pesquisa. No entanto, se o usuário digitar muito rapidamente, a chamada de API poderá ser feita muitas vezes, causando sobrecarga desnecessária no servidor e tornando a experiência do usuário mais lenta.

Para debounce esta função de pesquisa, podemos usar a setTimeout()função para atrasar a execução da chamada de API por um determinado período de tempo. Se a função for chamada novamente dentro desse período de tempo, o cronômetro será zerado e a função não será executada até que o cronômetro tenha decorrido.

<input id="input" type="text" placeholder="Search..." />
const search = document.getElementById("input");
      function debounce(func, delay) {
        let time = 0;
        return (...arg) => {
          clearTimeout(time);
          time = setTimeout(() => {
            return func(...arg);
          }, delay);
        };
      }
      search.addEventListener(
        "input",
        debounce(() => {
          console.log("Search Api called!");
        }, 1500)
      );

ouvimos eventos de entrada no campo de entrada de pesquisa e chamamos a função debounce. A função debounce só será executada após 1500 milissegundos desde a última vez que foi chamada.

Estrangulamento

A limitação é uma técnica que limita a taxa na qual uma função pode ser chamada. É comumente usado para evitar que uma função seja chamada com muita frequência, especialmente em resposta à entrada do usuário.

Digamos que você tenha um botão em seu site que acione um quando clicado. Cada vez que o botão é clicado, a animação recomeça. No entanto, se o usuário clicar no botão muito rapidamente, a animação poderá iniciar e parar repetidamente, causando um efeito de oscilação e uma experiência ruim para o usuário.

<button id="btn">Click</button>
const button = document.getElementById("btn");
      const throttle = (func, delay) => {
        let prev = 0;
        return (...arg) => {
          let curr = new Date().getTime();
          if (curr - prev > delay) {
            prev = curr;
            return func(...arg);
          }
        };
      };
      button.addEventListener(
        "click",
        throttle(() => {
          console.log("Button is clicked");
        }, 1500)
      );