JS错误 - 无响应的脚本

Question

我使用下面的代码动态添加元素到我的网页。它工作，但它冻结了页面。任何人都可以解释为什么会发生这种情况？

 <script>
            $(function() {
                var ruler = $("#ruler").height();
                var body = $("body").height();
                while (ruler <= body) {
                    $("#rulerStart").append("<div class='lineLarge'></div><div class='lineSmall'></div>");
                };
            });
        </script>

Answer 1

var ruler = $("#ruler").height();
var body = $("body").height();

这些值是静态的。设置后，请始终设置。

您需要在循环内重置它们：

$(function() {
    var ruler = $("#ruler").height();
    var body = $("body").height();
    while (ruler <= body) {
        $("#rulerStart").append("<div class='lineLarge'></div><div class='lineSmall'></div>");
        ruler = $("#ruler").height();
        body = $("body").height();
    };
});