javascript - Javascript 和 JQuery 性能不佳

Question

我的 JavaScript 代码遇到了严重的滞后问题。特别是视差非常慢。我预计这是由于函数的多次执行造成的。这是我的代码:

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);
  });

});

我该如何改进它？

Answer 1

您应该考虑使用requestAnimationFrame对于动画，由于浏览器会在每次重绘之前调用您的回调，因此可以更好地保证动画与显示器的刷新率同步。此外，某些浏览器会进行优化，最终产生性能更高的代码。

除了有关使用 setInterval 的答案之外，您的滚动事件回调还可以包含在 requestAnimationFrame 的调用中:

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

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

lastUpdate 参数是一个时间戳，表示排队回调开始触发的时间，因此您甚至可以使用它来限制您的逻辑。