有时window.resize需要两次调整大小才能真正执行我的javascript

我有一个列表，其中li图像向左浮动，并根据窗口大小（使用媒体查询和不同的img大小）按不同的行数排列。元素之间的垂直间距通过使用底部边距来完成。但是，最后一行的列表项不需要底部边距：它在页脚上方留下了太多的空间。我找到了一种（可能效率很低）使用JQuery消除最下面一行项目底部边距的方法：

    bottomMargin();
    window.onresize = bottomMargin;

    function numberOfRows () {
        var noOfRows = 0;
        $('#gallery ul li').each(function() {
            if($(this).prev().length > 0) {
                if($(this).position().top != $(this).prev().position().top)
                    noOfRows++;
            }
            else
                noOfRows++;
        });
        return noOfRows;
    }

    function whichRow() {
        var thisRow = 0;
        $('#gallery ul li').each(function() {
            if($(this).prev().length > 0) {
                if($(this).position().top == $(this).prev().position().top) {
                    $(this).data('row', thisRow);
                }   
                else {
                    thisRow++;
                    $(this).data('row', thisRow);
                }       
            }
            else {
                thisRow++;
                $(this).data('row', thisRow);
            }
        }); 
    }

    function bottomMargin() {                       
        whichRow();
        var totalRows = numberOfRows();
        $('#gallery ul li').each(function () {
            if ($(this).data('row') == totalRows)
                $(this).css('margin-bottom', '0%');
            else
                $(this).css('margin-bottom', '');   
        });
    }

---

这将在大多数情况下起作用。但是，如果我将多个媒体查询的大小调整到页面加载位置以外的位置，则不会改变初始窗口调整大小时的边距。我必须重新调整大小非常轻微之前，它摆脱了讨厌的底部边缘。为什么需要两次调整大小？

嗯，听起来像是在浏览器真正绘制页面之前进行数学运算和应用边距，或者其他与时间相关的事情。尝试限制大小回调：

var resizeTimer = 0;

$(window).on('resize', function() {
  clearTimeout( resizeTimer );
  resizeTimer = setTimeout(bottomMargin, 30);
})

function bottomMargin() {
  ...
}

---

谢谢完全修复了它，只需调整实际的setTimeout毫秒设置。