Skip to main content
1 de 2
fernandosavio
  • 9,3mil
  • 20
  • 41

Esta resposta é apenas um complemento à resposta do @hugocsl.

Quando se fala de eventos como scroll, resize ou mousemove é sempre importante lembrar que eles são lançados várias vezes por segundo enquanto o usuário interage com a página. Ou seja, dependendo do quê você faz dentro da função handler do evento, você pode deixar sua página lenta (ex.: acessar o DOM).

Se não há necessidade de executar esta função tão repetidamente você pode usar as técnicas debounce e throttle, que servem para limitar a execução de uma função em um período de tempo.

O debounce vai esperar que o evento pare de ser lançado por X segundos antes de ativar a função handler.

O throttle só vai permitir que a função handler seja executada a cada X segundos.

Exemplo:

// Só vai executar quando o usuário para de digitar por 1 segundo
$elemento.on('keyup', _.debounce(function() {
    console.log('debounce');
}, 1000));


// Enquanto o usuário seguir digitando, vai executar a cada segundo
$elemento.on('keyup', _.throttle(function() {
    console.log('throttle');
}, 1000));

Outra otimização, bem mais simples, é salvar o elemento DOM em uma variável para usar depois, visto que o acesso ao DOM é custoso em termos de performance.

Ao invés de:

$(window).scroll(function() {
    // é executado cada vez que 'scroll' é lançado
    $("#brand-image").fadeOut();
});

É mais performático usar:

// É executado apenas uma vez
var $brandImage = $("#brand-image");

$(window).scroll(function() {
    // Usa a refêrencia salva anteriormente
    $brandImage.fadeOut();
});

E a última e menos impactante é que, quando você faz:

$(window).scrollTop()

Você está convertendo um DOMElement em um objeto jQuery, não é tão custoso quanto acessar o DOM, mas ainda sim pode ser facilmente substituído pela propriedade window.pageYOffset que é nativo e a compatibilidade é aceitável (IE 9+).


Abaixo segue o código do @hugocsl com o handler de eventos normal, com debounce e com throttle para ilustrar a importância destas técnicas.

PS: Nos exemplos estou usando os métodos _.debounce() e _.throttle() da biblioteca lodash.


Normal

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
});
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>


Debounce

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(_.debounce(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
}, 300));
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>


Throttle

var $brandImage = $("#brand-image");
var $scrollHelper = $("#scroll-helper");
var count_scroll = 0;

$(window).scroll(_.throttle(function() {
  $scrollHelper.html("scroll triggered: " + ++count_scroll);
  if (this.pageYOffset >= 140) { // 140 é a distancia que vc rola antes da logo sumir
    $brandImage.fadeOut();
  } else {
    $brandImage.fadeIn();
  }
}, 300));
#scroll-helper {
  position: fixed;
  top: 80px;
  left: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <a class="navbar-brand" href="#">
    <img id="brand-image"src="https://placecage.com/50/50" />
  </a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div style="height:1000px; width: 100ps;"></div>
<span id="scroll-helper">scroll triggered: 0</span>

fernandosavio
  • 9,3mil
  • 20
  • 41