在javaScript中动画速度正在降低

-2

我在javaScript中创建了各种ul元素，然后在setInterval中，我通过添加li元素和减少每个ul的marginTop来动画这些uls。最初它以适当的速度运行，但在几秒钟后变得更慢。我能做些什么来使动画速度变得统一？这里是我的代码： -在javaScript中动画速度正在降低

for (var j = 0; j < 30; j++) 
      { 
       crazyNumbers[j] = document.createElement("ul"); 
       crazyNumbers[j].id = "list" + j; 
       document.getElementById("dynamic").appendChild(crazyNumbers[j]); 
       crazyNumbers[j].style.listStyleType = "none"; 
       crazyNumbers[j].style.marginLeft = (j * 40) + "px"; 
      } 




       dynamicList[0] = setInterval(function() { 

         var li = document.createElement("li"); 
         animatedNumber = parseInt(Math.random() * 10); 

         li.appendChild(document.createTextNode(animatedNumber)); 
         crazyNumbers[0].appendChild(li); 
         $("#list0").animate({ marginTop: '-=80px' }, 90); 

       }, 90); 
       dynamicList[1] = setInterval(function() { 

        var li = document.createElement("li"); 
        animatedNumber = parseInt(Math.random() * 10); 

        li.appendChild(document.createTextNode(animatedNumber)); 
        crazyNumbers[1].appendChild(li); 
        $("#list1").animate({ marginTop: '-=80px' }, 95); 

       }, 95);

来源

2015-05-28 Mayank Deora

请尽量减少此值。你已经发布了一大堆代码;我们不会去寻找所有潜在问题。 –

像这样我动画所有剩余的28 ul元素... –

难道令人惊讶的是你的窗口跟不上。从代码中我可以读到，你每秒钟创建约300个新的li元素，并且创建300个请求来为某种ul创建动画。 ul拥有的元素越多，动画就越强烈。

重要的是要注意，setInterval没有关于窗口如何保持性能的线索。因此，例如：

setInterval(function() { 
         $("#list0").animate({ marginTop: '-=80px' }, 90); 
       }, 90);

是不好的，因为没有保证的JavaScript将90毫秒后已经完成了它的动画，尤其是当你推动它像你一样。

可能减轻这个问题的一种简单的方法是完成那些元素

setInterval(function() { 
         $("#list0").finish().animate({ marginTop: '-=80px' }, 90); 
       }, 90);

但也许有更好的方式上运行的任何先前的喧闹将做这样的事情

function loopAnimateList ($mylist, duration){ 
    animatedNumber = parseInt(Math.random() * 10); 
    $myList.append(window.toStaticHTML('<li><text>' + animatedNumber + '</text></li>')) 
      .finish() 
      .animate({ marginTop: '-=80px' }, duration, null, function(){loopAnimateList($myList, duration);}); 
} 

$('ul').each(function(){loopAnimateList($(this), 90)});

只需在创建列表之后调用此函数，根本不使用setInterval。

但是，如果你保留这样的产卵清单元素，它只是推迟了不可避免的。

来源

2015-05-28 03:31:52 Hydde87

要更正一些错误，我已在您提到的代码的第3行中使用此代码： - $ myList.append（window.toStaticHTML（'

' +动画编号+'

'）） –

现在动画速度是统一的，但现在它比以前相对非常慢。速度不是按照代码即80px/90ms。我应该知道什么？ –

谢谢，我会更正代码。是的，没有任何方法实际上可以保证每90毫秒80像素。我认为关键在于控制你必须制作动画的列表元素的数量。我能想到的另外一件事可能会帮助你，就是尝试使用greensock的gsap库（只是谷歌它）。这是一个jQuery插件，用它自己的更高性能的插件覆盖了默认的动画方法。您不需要更改任何代码就可以使其工作，只需包含库。可能会为您的应用程序提供所需的边缘。 – Hydde87

在javaScript中动画速度正在降低

回答

相关问题