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

Question

我使用的是最新版本的 jQuery，当我最初加载页面时，容器中显示了正确的 CSS 剧院座位数。如果用户调整窗口的宽度，则只有椅子的扶手会相互重叠显示，页面的宽度会远远超出窗口的宽度；加上页面卡住。

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

    $( document ).ready( function() {
        var setSize = function(){
        var blokWidth = $( ".workwithme" ).width();
        var seat = $(".seatBlok").outerWidth();

        var containMe = Math.floor( blokWidth / seat );
        $( "span:first" ).text( containMe );

        var hope = $(".seatBlok");
        for (var i = 1; i < blokWidth; i++){
        hope.clone().insertAfter(hope);
    }}

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

感谢您提前提出任何建议!

Answer 1

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

我能否建议您也使用浏览器的控制台(例如 Chrome 开发工具)来了解有关 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);
}