javascript - jQuery:在调整窗口大小时添加和删除元素但始终覆盖窗口

Question

我想为我的网站创建一个基线网格，它始终在页面底部显示基线。

我所做的是创建一个通过 css 设置样式的初始基线。

<figure id="lines">
    <div class='base-line bl1'></div>
</figure>

然后创建新的，直到我到达文档的底部。

<script type="text/javascript">
        $(document).ready(function() {
            var diff = Math.floor( $('body').height() / $('.base-line').height() );
            for ( var i = 1; i <= diff; i++ )
                $('#lines').append("<div class='base-line bl" + i + "'></div>");
        });
    </script>

但是，当我调整页面大小时(例如降低高度)，会留下基线。当我动态增加文档的高度(例如，使用媒体查询更改某些值)时，基线不会到达页面底部。

是否可以调整在调整大小时添加和删除基线的调整大小处理程序？我想如果我在每次调整大小时删除所有 base-line 并为每个调整大小状态绘制所有它们，这将是相当低效的。

有什么想法吗？

Answer 1

假设这是创建基线的函数

function addBaseLines(){
    $('#lines').clear();
    var diff = Math.floor( $('body').height() / $('.base-line').height() );
    for ( var i = 1; i <= diff; i++ ){
       append("<div class='base-line bl" + i + "'></div>");
    }
}

你可以这样做

var timeout = null;

$(window).resize(function(){
    if (timeout!=null){
        clearTimeout(timeout);
    }
    timeout = setTimeout( addBaseLines, 1000); // only do when the user is "done" 

});

参见JSFiddle

如果你使用超时，性能并不差......

为了提高性能，把看不见的去掉就好了，不过我觉得不是那么关键