Question

我看了很多，但还没有找到答案。也许这只是无法完成的事情。

我是jQuery和JavaScript的新手。只是为了测试我正在尝试创建一个脚本的限制，该脚本将在未选中复选框的情况下将列表项连续附加到未排序的列表。我知道在查找是否选中了复选框时，我的while语句可能没有正确，但我现在遇到的主要问题是while循环的运行速度比浏览器可以跟上的速度快，锁定了页面，最终我必须杀死浏览器。我已经阅读了很多关于setTimeout和setInterval的例子，但是我不断看到的是那些只能用于for / next样式循环的东西，其中循环依赖于变量进行预定量的循环。我不想要这个。我希望循环继续，直到我选中该框然后它应该停止。所以我正在寻找一种暂停循环或减慢循环的方法1）我可以看到每个列表项附加到页面上，2）脚本将给我一个机会通过在运行之前选中框来结束它浏览器冻结/自杀。

提前致谢，代码如下。

$(function(){
    $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);

        function loopLi() {
            while($('#Chckbox').not(":checked") ) {
                setInterval(function(){
                    i++;
                    $('<li>' + i + '</li>').appendTo('#jlist');
                }, 5000);
            }
        }
});

编辑：谢谢大家。搞定了。没有意识到while循环会同时多次运行代码。这一切都是为了工作而学习的，而我们目前所拥有的这本书并未深入探讨这些内容。目前使用jQuery：新手到忍者。还有什么我们应该看看来回答这些问题，或者这只是与它一起工作的东西？

Answer 1

您现在正在创建无限的间隔 - 只要执行while循环，它就会创建一个新的循环，因此浏览器总是很忙，无法响应复选框点击。只需一个间隔即可。

此外，您应该使用! .is()，因为.not会返回一个jQuery对象，它始终是真实的，即传递if / while。

http://jsfiddle.net/rUAKx/

var i = 0;

function loopLi() {
    setInterval(function() { // this code is executed every 500 milliseconds:

        if(!$('#Chckbox').is(":checked")) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
        }

    }, 500);
}

$(loopLi);

Answer 2

我猜你想做类似的事情：

http://jsfiddle.net/PsXEa/5/

$(function(){
    i = $('#jlist li').size();
    console.log(i);

    function loopLi() {
        if ($('#Chckbox').not(":checked") ) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
            setTimeout(loopLi,1000);
        }
    }
    loopLi();
});

请注意，这里有很多类似的解决方案。您应该选择一个在循环中明确使用setTimeout调用，或使用setInterval清除其clearInterval计时器的人。

Answer 3

当用户选中复选框时，您可以使用clearInterval停止执行追加过程。试试这个：

$(function(){
       var intObj = null;
  $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);
        function loopLi() {
            intObj = setInterval(function(){
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
          }, 5000);
        }
        $('#Chckbox').click(function(){
            if(this.checked){
             clearInterval(intObj );
            }
        });
});

Answer 4

这是一个有效的修订版。基本上，loopLi只会添加项目，直到选中该复选框。我把它加速了，这样你就能更好地看到它。

http://jsfiddle.net/TrowthePlow/WkstU/

试图在jQuery中延迟/暂停/减慢while循环

4 个答案: