Question

我有一段代码，每隔十分之一秒就会在文档中添加一个div，将其随机方向设置为朝向页面边缘，然后将其删除。目前帧速率非常低，所以我想知道是否有一种方法可以在div离开页面边缘时自动删除div（左边或顶部值超过100％或低于0％）

或者是否有其他方法可以提高帧速率......

这是代码：

    function myFunction() {  

//the following generates four random numbers between 100-400 and asigns 2 of them to be the top and left values

var RN=Math.floor(Math.random()*2);
var RN2=Math.floor(Math.random()*2);
var RNMB4=Math.random()*300+100;
var RNMB2=Math.random()*300+100;
var RNMB3=Math.abs(Math.random()*300) * -1;
var RNMB1=Math.abs(Math.random()*300) * -1;
var NMBRS=[RNMB1,RNMB2];
var NMBRS2=[RNMB3,RNMB4];
    $("<div/>").appendTo('body').animate({
            left: NMBRS[RN] + '%',
            top: NMBRS[RN] + '%',
            }, 
            1000), function(){$(this).remove();});
    }

    setInterval(myFunction,100);

Answer 1

很多时候隐藏和元素比从dom中删除更便宜。

时，我会尝试在元素上调用.hide（）。

根据您要制作动画的元素数量，最终可能需要清理它们。

随机生成的数字也可以减少2/3。生成它们可能相当昂贵。

Answer 2

您可以使用requestAnimationFrame方法来提升动画效果，尽管此API通常需要供应商前缀且不向后兼容。

还有一件事是，您通常应该（如果不是总是）将动画元素设置为position：absolute。因此元素不会使文档重排。

您可以使用Greensock，一个高性能的js动画库。它还有一个jquery插件来平滑jQuery中的animate方法。

顺便说一下，一个不必要的括号会使你的代码无法匹配...当你粘贴你的代码时可能是一个错字？

自动从DOM中删除元素

2 个答案: