Question

我正在进行测试以执行非bloking脚本以呈现大型jQuery-UI手风琴，因此不使用循环，它将始终阻止浏览器直到完成，我正在尝试使用计时器分别渲染每个部分，但它似乎创建了一个无限循环（不确定为什么它应该达到退出条件）：

(function(){
    var accordion = $('.accordion').accordion({collapsible: true});
    var source = $('.source');
    var sourceCopy, timerCount = 0, times = 100;
    var createNewTab = function(i) {
        sourceCopy = source.children().clone();
        sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
        accordion.accordion('refresh');
    };

    (function run(){
        var timer;
        createNewTab(timerCount);
        timerCount++;
        /*while (timerCount < times) {  // commented out to avoid endless loop
            timer = setTimeout(run, 0);
        }*/

        // OLD BROWSER-BLOCKING VERSION WITH LOOP. IT WORKS BUT BLOCKS BROWSER UNTIL DONE
        /*for (var i = 0; i < times; i++) {
            createNewTab(i);
        }*/

    })();
})();

HTML：

<div class="source">
    <h3>title</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.    
        <p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
    </div>
</div>

<div class="accordion"></div>

源代码here

我怎么能解决这个问题？

Answer 1

将while替换为if。您的setTimeout已经反复调用该函数，直到timerCount == times。

＆＃13;

(function(){
    var accordion = $('.accordion').accordion({collapsible: true});
    var source = $('.source');
    var sourceCopy, timerCount = 0, times = 100;
    var createNewTab = function(i) {
        sourceCopy = source.children().clone();
        sourceCopy.filter('h3').text('Title ' + i).end().appendTo(accordion);
        accordion.accordion('refresh');
    };
    
    (function run(){
        var timer;
        createNewTab(timerCount);
    	timerCount++;
        if (timerCount < times) {
            timer = setTimeout(run, 0);
        }
    })();
})();

＆＃13;

.source {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<div class="source">
    <h3>title</h3>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum malesuada molestie. Duis sem massa, mollis eget lacinia sit amet, blandit a tortor. Etiam ultrices facilisis tempor. Ut sagittis, nisi nec vestibulum condimentum, dolor urna gravida dui, nec posuere nibh nibh a dui. Nunc eleifend convallis varius. Nulla facilisi. Nullam ut quam sed augue commodo fermentum quis nec turpis. In interdum aliquet mi, a placerat orci sagittis sed. Sed fermentum urna eu arcu consequat, vel egestas enim eleifend. Proin augue tellus, hendrerit nec quam vitae, placerat malesuada ligula. Integer faucibus ullamcorper odio sagittis dapibus. Nam sed ex vel metus bibendum aliquam vel sit amet ante. Maecenas ultrices sem sagittis est finibus, id fermentum dolor molestie.

        <p>Donec ipsum ipsum, pharetra eu arcu eu, lobortis convallis augue. Morbi sit amet tortor dui. Nam eget lacinia turpis. Quisque efficitur vulputate sapien, non dignissim dolor malesuada ut. Integer non diam et magna maximus tincidunt quis viverra tortor. Ut ut mauris ut tortor faucibus pellentesque. Nunc iaculis, elit luctus malesuada lobortis, tellus elit egestas orci, at cursus tellus nisl molestie neque. Pellentesque convallis nisi ut purus dignissim, a vestibulum libero condimentum. Sed congue leo eget condimentum vulputate. Nunc accumsan massa id tempor luctus. Vivamus orci lectus, ornare vestibulum arcu eget, egestas luctus ipsum. Maecenas sodales, mi eu volutpat tempor, justo mi laoreet lacus, vel viverra lacus augue ut felis. Aenean ullamcorper risus eget ante venenatis viverra. Morbi malesuada erat ante, quis egestas lacus tristique sed.
    </div>
</div>

<div class="accordion">
    
</div>

＆＃13;

Fixed JS Fiddle

带定时器的非阻塞脚本

1 个答案: