jquery反应慢答案

【问题标题】：Jquery slow reaction timejquery反应慢
【发布时间】：2015-01-21 22:49:29
【问题描述】：

我尝试将jQuery用于我的标题动画，添加后动画变慢：

else if (headeranimated && $(this).scrollTop() > 1200)
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)

我必须等待几秒钟才能看到动画的第二部分。这段代码有什么问题吗？

谢谢

 // header animation
var headeranimated2 = false;
var headeranimated = false;
var headeranimated3 = false;

$(window).scroll(function() {
  if ($(window).width() > 800) {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        left: "-40%"
      }, 800);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() > 1200) {
      $('#headerpattern').animate({
        top: "-20%"
      }, 200);
      headeranimated2 = true;
    } else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) {
      $('#headerpattern').animate({
        top: "0"
      }, 200);
      headeranimated2 = false;
      headeranimated3 = true
    } else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        left: "0"
      }, 800);
      headeranimated = false;
      headeranimated3 = false;
    }
  } else {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        top: "-8%"
      }, 1200);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        top: "0"
      }, 800);
      headeranimated2 = false;
    }
  }
});

【问题讨论】：

标签： javascript jquery web visual-web-developer

【解决方案1】：

scroll 甚至是一个在滚动时连续发出的事件，因此它会在您滚动时每秒触发多次。

每当您为元素调用.animate 时，动画都会添加到队列中。并且动画按照添加到队列中的顺序一个接一个地执行。由于您的动画的持续时间在 200 到 1200 的范围内，因此您可能会导致动画队列的持续时间为几秒。

一种解决方案是在致电.animate 之前致电.stop()：

$('#headerpattern').stop().animate(....)

但这可能会破坏您想要的效果。

另一种解决方案是检查当前是否有动画正在运行，如果有，则不要启动新动画。但这会产生某种走走停停或延迟效果。

【讨论】：

是的，这似乎是这里最简单的解决方案，但我只是想知道如果我让滚动功能继续运行，它会影响性能（较慢计算机的速度）吗？
是的，.stop() 确实会影响动画，因为它对触摸板不太友好。
@ZhengWang 问题是用户连续滚动的时间越长，动画队列就越大。即使不是性能问题，您的效果也会被阻塞很长时间，然后才能再次正确工作。尤其是对于触摸设备，这可能是一个大问题。一般我会说这种效果用.animation是不可行的。
您的意思是针对这种特定情况还是针对一般滚动？
@ZhengWang .animation() 不能很好地与mousemove 或scroll 等短间隔触发的事件结合使用。

【解决方案2】：

好吧..您正在调用滚动侦听器，该侦听器在您滚动时每时每刻发生。但是您还播放了滚动速度较慢的动画。当您通过滚动调用滚动侦听器时，您会创建多个 nimations 调用，它们会尝试同时播放所有内容（这就是它减慢 ui 的原因）。

解决方案：如果动画仍在播放 - 不要滚动

var animScroll;

$(window).scroll(function()
{
    if (animScroll) return;

    if ($(window).width() > 800)
    {       
       if (!headeranimated && $(this).scrollTop() > 500) 
       {
         animScroll = true;
         $('#headerpattern').animate({ left: "-40%"}, 800, function()
         {
            animScroll = false;
         });

         headeranimated = true;
     }

     // rest of code

【讨论】：