带计时器的非阻塞脚本

Question

我正在做一个测试，以执行非中断脚本，以渲染大型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>

这里的源代码

我该如何解决？

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> 

固定JS小提琴