带定时器的非阻塞脚本

Question

我正在测试执行非阻塞脚本以呈现 大型 jQuery-UI 手风琴，所以不要使用循环，它总是会阻塞浏览器直到完成，我正在尝试使用 timers 分别渲染每个部分，但它似乎创建了一个无限循环（不知道为什么，因为它应该达到退出条件）：

(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。

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

.source {
    display: none;
}

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

Fixed JS Fiddle