糟糕的Javascript和JQuery性能

Question

I am experiencing extreme lag issues with my javascript code. Especially parallaxing is very slow. I expect that this results from multiple executions of the functions. Here is my code:

function tada() {
  $(".arrow").addClass("tada");
  setTimeout(function () {
      $(".arrow").removeClass("tada");
  }, 1000);
}

var j = 0;

function thumb() {
    if(j < 18) {
      setInterval(function () {
        $('.equip-thumb').eq(j).css('opacity', '1');
        j++;
      }, 100);
  }
}

$(document).ready(function(){
  for (var i = 0; i < 18; i++) {
    var color = "#1b1f25";
    if ((i%3) === 0) {
      color = "#1b222c";
    }
    if ((i%3) === 1) {
      color = "#171c23";
    }
    if ((i%3) === 2) {
      color = "#2a313b";
    }
    $('.equip-thumb').eq(i).css("background-color", color);
  }
});

var fired = 0;

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();
  var wHeight = $(this).height();

  $(".arrow").css({
    'opacity' : 1-wScroll/wHeight/0.5
  });

  $("#splash").css({
    'transform' : 'translate(-'+ wScroll /10 +'% , 0px)',
    'opacity' : 1-wScroll/wHeight/0.5
  });

  if(wScroll > ($('.section-equipment').offset().top - 0.6*wHeight)) {
      if (fired === 0) {
        fired = 1;
        thumb();
      }
    }
});


$(function() {
  setInterval(function () {
    tada();
  }, 4000);

  $('.equip-thumb').on({
    mouseover: function(){
      $(this).children().css('transform', 'translate(0px, 0px)');
    },
    mouseleave: function() {
      $(this).children().css('transform', 'translate(0px, 100%)');
    },
    click: function(){
      $(this).siblings().children().css('transform', 'translate(0px, 100%)');
      $(this).children().css('transform', 'translate(0px, 0px)');
    }
  });

  $('#portfolio-a').click(function (){
    $('html, body').animate({
      scrollTop: $('.section-portfolio').offset().top - 65
    }, 1000);
  });

  $('#equipment-a').click(function (){
    $('html, body').animate({
      scrollTop: $('.section-equipment').offset().top - 65
    }, 1000);
  });

  $('#contact-a').click(function (){
    $('html, body').animate({
      scrollTop: $('.section-contact').offset().top - 65
    }, 1000);
  });

});

How could I improve it?

Answer 1

The code below will run forever. Because j < 18 initially, it will execute the setInterval function. However, there is nothing that is stopping the function from ending. Therefore, you are executing $('.equip-thumb').eq(j).css('opacity', '1') 10 times a second forever!

setInterval(function () {
    $('.equip-thumb').eq(j).css('opacity', '1');
    j++;
  }, 100);

In order to fix this, you should create a for loop instead (to keep things simple) and use setTimeout instead of setInterval. I hope this helps!

Answer 2

You should contemplate using requestAnimationFrame for animation, as the browser will invoke your callback before each repaint, thus it's a better guarantee that animations will be in sync with your monitor's refresh rate, Also, some browsers will make optimisations which ultimately result in more performant code.

Aside from the answers surrounding your use of setInterval , your scroll event callback could be wrapped in an invocation of requestAnimationFrame :

$(window).scroll(function () {
    requestAnimationFrame(function (lastUpdate) {
        var wScroll = $(this).scrollTop();
        var wHeight = $(this).height();

       $(".arrow").css({
            'opacity' : 1-wScroll/wHeight/0.5
        });
    });
});

The lastUpdate parameter is a timestamp representing when queued callbacks begin to fire, so you could even use this to throttle your logic.