jquery - 在窗口调整大小时获取 div 的实时宽度？

Question

假设我有一个部分，它的宽度是 1181（在控制台中输出），我正在使用以下代码来找出它的宽度：

jQuery(document).ready(function()
{
    var body_size = jQuery('section').width();
    console.log(body_size);
});

如果我重新调整浏览器的大小，我必须重新加载页面以找出这个 div 的新大小。

有没有办法在我重新调整浏览器大小时找出大小？

Answer 1

您可以处理“调整大小”事件。请注意，该事件会非常频繁地触发，因此最好不要在处理程序中进行任何 DOM 操作，或者尽可能少地进行操作。处理此问题的一种方法是使用计时器：

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $('section').width();
    // ...
    // do your work here
    // ...
  }, 200);
});

这会设置一个计时器，以便在用户停止调整大小（或暂停一段时间）后至少 200 毫秒，您实际上不会做任何工作。