Question

我的javascript代码遇到了极端滞后问题。特别是parallaxing非常缓慢。我希望这可以通过多次执行函数来实现。这是我的代码：

.row{
   padding-top:50px;
   padding-left:75px;
}

.navbar-brand{
   padding-left: 75px;
}

我怎样才能改善它？

Answer 1

以下代码将永远运行。因为j <最初，它将执行setInterval函数。但是，没有什么可以阻止函数结束。因此，你永远执行$（'。equip-thumb'）。eq（j）.css（'opacity'，'1'）每秒10次！

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

为了解决这个问题，你应该创建一个for循环（为了简单起见）并使用setTimeout而不是setInterval。我希望这有帮助！

Answer 2

您应该考虑使用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参数是一个时间戳，表示排队的回调何时开始触发，因此您甚至可以使用它来限制逻辑。

糟糕的Javascript和JQuery性能

2 个答案: