使用setInterval的Js动画随着时间的推移而变慢

Question

我有一个网站，它使用这个滚动条http://manos.malihu.gr/jquery-custom-content-scroller/显示一个投资组合。

当页面完全加载时，我希望有一个自动滚动。当用户通过投资组合时，它会停止滚动，当他离开时，它又开始移动了。

它目前运行良好，但有时它变得缓慢或缓慢随机。我的js功能有什么问题吗？

下面是有问题的页面：http://www.lecarreau.net/new/spip.php?rubrique5 (我需要主机提供商的更改，我知道站点速度很慢)。

这是一项功能：

(function($){
var timerId = 0;
$(window).load(function(){
    $("#carousel").show().mCustomScrollbar( {
        mouseWheel:false,
        mouseWheelPixels:50,
        horizontalScroll:true,
        setHeight:370,
        scrollButtons:{
            enable: true,
            scrollSpeed:50
        },
        advanced:{
            updateOnContentResize:true
        }
    });
    timerId = setInterval(function(){myTimer()},50);
    $('#carousel').mouseenter(function () {
      clearInterval(timerId);
    });
    $('#carousel').mouseleave(function () {
      timerId = setInterval(function(){myTimer()},50);
    });
});
})(jQuery);


function myTimer()
{
  var width = $(".mCSB_container").width();
  var left = $(".mCSB_container").position().left;
  if (width-left>0) {
    var scrollTo = -left+4;
    $("#carousel").mCustomScrollbar("scrollTo", scrollTo);
  }
}

我有什么明显的遗漏吗？

Answer 1

浏览器中的定时从来没有保证过。由于单个事件循环上的所有功能内容都是时间，因此连续重复的任务有时会变得有点简陋。

您可以做的一件事情可能会减少jank，那就是每50 is缓存一次正在创建的jQuery对象：

var mCSBContainerEl = $(".mCSB_container");
var carouselEl = $("#carousel")
function myTimer()
{
  var width = mCSBContainerEl.width();
  var left = mCSBContainerEl.position().left;
  if (width-left>0) {
    var scrollTo = -left+4;
    carouselEl.mCustomScrollbar("scrollTo", scrollTo);
  }
}

选择这些元素只需要发生一次。在那里，他们只需引用一个变量，而不必一次又一次地在页面上找到元素并将其包装在jQuery中。

在本例中，缓存变量取决于代码运行时它们是否在DOM中，这在这里不能保证。您可能必须将变量赋值和函数声明移到传递给load的函数中。

此外，正如John所建议的，请考虑查看requestAnimationFrame。这是保罗·爱尔兰人用的一个垫子：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/