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就是缓存你每50ms创建一次的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的函数中。

另外，正如约翰史密斯建议的那样，考虑结帐requestAnimationFrame。这是Paul Irish使用的垫片：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

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

1 个答案: