当前位置：文江博客话题详情

jquery优化循环动画函数

发布于 2024-12-17 23:33:44 字数 254 浏览 3 评论 0原文

我需要找到一种更有效的方法来实现此结果：

http://jsfiddle.net/H4sjf/1 /

setInterval() 与 .each() 以及后续的 .animate() 混合使该脚本相当慢。有没有办法利用其他一些“较便宜”的流程/功能来实现这一结果？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

调妓 2024-12-24 23:33:44

也许您可以为 animate() 创建一个回调函数，而不是 setinterval 来重新设置“this”动画并将其自身作为回调调用？

[编辑]
我删除了一些不必要的代码：

http://jsfiddle.net/8kgAB/1/

DoPopulateSoundBoard();
function DoPopulateSoundBoard(){
    $('.sound-syn-column').each(function(){
        var dSoundSyn = '';
        for( i = 0; i <= 8; i++ ){
                dSoundSyn += "<div class='ui-corner-all sound-syn'></div>";
            }
        $(this).append( dSoundSyn + "<div class='sound-syn-cover'></div>" );
    });




        $('.sound-syn-cover').each(function(){
                    test34($(this));
        });

}

function test34(obj){
    obj.animate({height: Math.floor( Math.random()*56) }, 500, function(){
            test34($(obj));
    });       
}

不确定如果这更快，但可能是因为 setinterval 太慢了。

Instead of setinterval maybe you could create a callback function for animate() that re-animates "this" and calls itself as a callback?

[edit]
I removed a bit of unnecessary code:

http://jsfiddle.net/8kgAB/1/

DoPopulateSoundBoard();
function DoPopulateSoundBoard(){
    $('.sound-syn-column').each(function(){
        var dSoundSyn = '';
        for( i = 0; i <= 8; i++ ){
                dSoundSyn += "<div class='ui-corner-all sound-syn'></div>";
            }
        $(this).append( dSoundSyn + "<div class='sound-syn-cover'></div>" );
    });




        $('.sound-syn-cover').each(function(){
                    test34($(this));
        });

}

function test34(obj){
    obj.animate({height: Math.floor( Math.random()*56) }, 500, function(){
            test34($(obj));
    });       
}

not sure if this is any faster, but it might be since setinterval is so slow.

回复收藏 0 原文

握住我的手 2024-12-24 23:33:44

您可以通过向每个 div 添加单独的 setInterval() 函数来解耦 setInterval() 和 .each()一次：

$('.sound-syn-cover').each(function(){
    var $this = $(this);
    $this.data('intervalCallback', setInterval(function(){
        $this.animate({height: Math.floor( Math.random()*56) }, 500);
    }, 300));
});

jsFiddle

You can decouple setInterval() and .each() by adding individual setInterval() functions to each div just once:

$('.sound-syn-cover').each(function(){
    var $this = $(this);
    $this.data('intervalCallback', setInterval(function(){
        $this.animate({height: Math.floor( Math.random()*56) }, 500);
    }, 300));
});

jsFiddle

回复收藏 0 原文

~没有更多了~