1

jQuery 存在一些性能问题。

我正在遍历我的 Wordpress 主题中的所有帖子，每个帖子都被动态指定为一个 div：即。容器1。因此，主要是为了进行实验，我制作了一个幻灯片来显示每个帖子，然后在到达最终 div 后返回到第一个。为了重置滑块，我不断迭代，直到循环看到一个不存在的 div（使用'if (!$('#container'+i).length == 0)'）。

我确信这是相当糟糕的代码，但正如我所说，这是 90% 的实验，它正在工作，除了性能很糟糕（Chrome 渲染器使用 100% 的 cpu）。我将在下面粘贴我的代码，任何帮助/建议将不胜感激。

// UI FUNCTIONS

var $ = jQuery.noConflict();

    i = 1;

    //iterates through all divs hiding them, calls delayedLoop() once all divs are hidden
    function resetdiv() {
        if (!$('#container'+i).length == 0) {
                $('#container'+i).stop().hide();
                i++;
                resetdiv();
               }

         else {
                i = 1;  
                setTimeout(function() { delayedLoop() },1000);     
              } 
    }

    //Hides current div, incretments i and calls delayedLoop after a delay
    function hidediv() {
        $('#container'+i).stop().fadeOut('slow');
        i++;
        setTimeout(function() { delayedLoop() },1000);      
        }

    //iterates through divs, showing current once and calling hidediv after a delay, after all divs have been iterated sets i = 0 and calls reset divs
    function delayedLoop(){
               if (!$('#container'+i).length == 0) {
                        $('#container'+i).stop().fadeIn('slow');
                        setTimeout(function() { hidediv() },10000);
                        //delayedLoop()
                     }

               else {

                    i = 1;  
                    setTimeout(function() { resetdiv(); },1000);
                    }


                }

$( document ).ready(function() {
        resetdiv();
});
4

1 回答 1

0

尝试

jQuery(function($) {
    var loopInterval, current = 0;
    var divs = $('div[id^="container"]');

    function resetdiv() {

        divs.stop().hide();
        current = 0;

        clearInterval(loopInterval);
        loopInterval = setInterval(function() {
            if (current > divs.length) {
                current = 0;
            }
            $(divs.get(current++)).stop().fadeIn('slow').delay(3000).fadeOut('slow');
        }, 4000);

    }

    resetdiv();
});

演示：小提琴

于 2013-04-30T11:37:08.593 回答