jquery窗口调整大小导致奇怪的克隆问题

Question

我正在使用最新版本的jQuery，当我最初加载页面时，容器中会显示正确数量的CSS影院座位。如果用户调整窗口的宽度，则仅示出椅子的臂彼此叠置并且页面的宽度远远超出窗口的宽度;加上页面冻结。

您可以在此处查看CodePen： https://codepen.io/ryanindustries8/pen/BJrPMd

object

提前感谢您的任何建议！

Answer 1

Here is a code pen I made that fixes your immediate issues. 您的代码存在许多问题。

我是否可以建议您使用浏览器的控制台（例如Chrome Dev Tools）来了解有关JS如何工作的更多信息。我已经注意到你的一些代码来表明我的意思。 这是你工作的代码笔分支。这不是理想的，而是一种比我想象的更好的快速解决方案。

你曾经去过的调整大小的侦听器，在简短的调整大小中发射了50多次

在用户调整大小时不断发出resize event。 在我的情况下，setsize()函数在一两秒内运行了50次以上。 要限制此次运行的次数，我使用lodash _.debounce。本文还有助于解释debounce / throttling。

 $( window ).resize(setSize);
 setSize();

因此，在调用setsize的50多次中，每次都会运行for循环。

// i increments up to the width of browser (in pixels) 
// my screen is 1920 wide, so this ran many times!
// this resulted in thousands of .seatBlok elements being put into DOM.
for (var i = 1; i < blokWidth; i++){
   hope.clone().insertAfter(hope);
}