Question

我在javaScript中创建各种ul元素，然后在setInterval中，我通过添加li元素并减少每个ul的marginTop来设置这些uls的动画。最初它以适当的速度运行，但几秒后它会变慢。我能做些什么来使动画速度均匀？这是我的代码： -

 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);

Answer 1

令人惊讶的是，您的窗户无法跟上。从我可以从代码中读到的内容，你每秒创建大约300个新的li元素，以及制作300个动画来设置某种ul的动画。 ul具有的li元素越多，它的动画就越强烈。

重要的是要注意setInterval不知道窗口保持性能的程度。例如：

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

不好，因为无法保证javascript会在90ms后完成动画，特别是如果你像你一样推动动画。

可能会减轻此问题的一种简单方法是完成在元素上运行的所有先前动画

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。

但是，如果你继续产生这样的列表元素，它只是推迟了不可避免的事情。

动画速度在javaScript中降级

1 个答案: