Optimierung von JQuery beim Scrollen und Anhalten der Queuing von Methoden

Question

Ich benutze die JQuery auf Scroll von denen offensichtlich so oft wie der Benutzer scrollt aber die Animation hinkt, wenn der Benutzer scrollt hoch und runter schnell genug. Ich gehe davon aus, dass jedes Mal, wenn ein Scroll ausgeführt wird, die Methode ausgeführt wird. Ich habe getan, was ich kann, um den Code unten zu optimieren, wenn Sie irgendwelche Ideen haben, um es zu verbessern, lassen Sie es mich wissen!

$(document).ready(function() { 
    var count = 0; 
    var speed = 100; 
    var triggerY = 50; 
    $(window).on('scroll', function() { 
     count++; 
     if (count>10) { 
      var currentY = window.pageYOffset; 
      if (currentY < triggerY) { 
       if ($('#accountHolder').height() != 70) { 
        $('#barTitle').animate({fontSize: "40px"}, speed); 
        $('#barSlogan').fadeIn(); 
        $('#accountHolder').animate({height: "70px"}, speed); 
        $('#accountPosition').animate({top: "13px"}, speed); 
       } 
      } else { 
       if ($('#accountHolder').height() != 60) { 
        $('#barTitle').animate({fontSize: "32px"}, speed); 
        $('#barSlogan').fadeOut(); 
        $('#accountHolder').animate({height: "50px"}, speed); 
        $('#accountPosition').animate({top: "5px"}, speed); 
       } 
      } 
      count = 0; 
     } 
    }); 
}); 

Answer 1

scroll Ereignis ist ein sehr kostspieliger Vorgang, da es jedes Mal die Benutzerrollen auf dem Binded Element ausgelöst wird.

Wenn Sie nach Leistung suchen, verwenden Sie CSS-Animationen statt JS-Animationen. CSS-Animationen sind viel schneller und verzögerungsfrei.

Das ist was ich genau meine.

$(document).ready(function() { 
    var count = 0; 
    var speed = 100; 
    var triggerY = 50; 
    $(window).on('scroll', function() { 
     count++; 
     if (count>10) { 
      var currentY = window.pageYOffset; 
      if (currentY < triggerY) { 
       if ($('#accountHolder').height() != 70) { 
        $('#barTitle').addClass('increase-font-size') 
        $('#barSlogan').addClass('show'); 
        $('#accountHolder').addClass('increase-height'); 
        $('#accountPosition').addClass('pull-down'); 
       } 
      } else { 
       if ($('#accountHolder').height() != 60) { 
        $('#barTitle').removeClass('increase-font-size') 
        $('#barSlogan').removeClass('show'); 
        $('#accountHolder').removeClass('increase-height'); 
        $('#accountPosition').removeClass('pull-down'); 
       } 
      } 
      count = 0; 
     } 
    }); 
}); 

Diese Klassen sollten die Animationsstile haben.

.increase-font-size { 
    font-size: 40px; 
    -webkit-transition: font 2s; 
    transition: font 2s; 
} 
.show { 
    opacity: 1; 
    -webkit-transition: opacity 2s; 
    transition: opacity 2s; 
} 
.increase-height { 
    height: 70px; 
    -webkit-transition: height 2s; 
    transition: height 2s; 
} 
.pull-down { 
    top: 13px; 
    -webkit-transition: top 2s; 
    transition: top 2s; 
}