Javascript 浏览器在调整大小功能时崩溃

我正在尝试创建一个响应性的水平列表导航，它根据屏幕大小适合项目的数量。不适合的项目将放在下拉菜单中。这很好，但现在我想在调整大小时重新执行脚本。但只要我在resize函数中调用该函数，浏览器就会冻结。我假设它陷入了一个循环，但我似乎无法调试它。有人知道怎么回事吗

    function overflowDropdown() {

      'use strict';


    // Define the context we will be operating in.
      var list = '.action-menu ul';

      // Act only if the more tab is not created yet.
      if (typeof $(list) != 'undefined' && $(list) != false && $(list).length > 0) {

    // We will store any items here that we want to move.
    var itemsToMove = new Array();

    // get window width
    var windowWidth = $(window).width();

    // define how much items fit one the screen
    var itemsFit = 1;

    if (windowWidth > 450) {
      itemsFit = 2;
    }
    if (windowWidth > 600) {
      itemsFit = 3;
    }

    // Loop through all items and retrieve the index
    $.each($('li', list), function(index, value) {

      // Add everything except the first item to the items_to_move array.
      if (index > (itemsFit - 1)) {
       itemsToMove.push(value);
      }

    });

    // If there is more than one item to move we proceed here.
    if (itemsToMove.length > 1) {
    // Add our new container div.
      $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

      // Foreach items that need to moved place them in the newly created awesomebox dropdown.
      $.each(itemsToMove, function(index, value) {
        $('#dropdown-action-menu ul', list).append(value);
        $('#dropdown-action-menu').hide();
      });
    }

  }

};

---

我通过克隆菜单并保留原来的菜单解决了这个问题。现在每次调用脚本时都会重置脚本

// This script creates a dropdown of the action menu, when there are more then 2 buttons.

function overflowDropdown() {

  // Define the context we will be operating in.
  var list = $('.original-action-menu ul').clone();
  $('.original-action-menu').hide();



if ( $('.action-menu').length ) {
    $('.action-menu').remove();
  }

  // We will store any items here that we want to move.
  var itemsToMove = new Array();

// get window width
var windowWidth = $(window).width();

// define how much items fit on the screen
var itemsFit = 1;

if (windowWidth > 450) {
  itemsFit = 2;
}
if (windowWidth > 600) {
  itemsFit = 3;
}

// Loop through all items and retrieve the index
$.each($('li', list), function(index, value) {

  // Add everything except the first item to the items_to_move array.
  if (index > (itemsFit - 1)) {
   itemsToMove.push(value);
  }

});

// If there is more than one item to move we proceed here.
if (itemsToMove.length > 1) {
// Add our new container div.
  $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

  // Foreach items that need to moved place them in the newly created awesomebox dropdown.
  $.each(itemsToMove, function(index, value) {
    $('#dropdown-action-menu ul', list).append(value);
    $('#dropdown-action-menu').hide();
  });
}

list.insertAfter('.original-action-menu');
list.wrapAll('<div class="action-menu">');

//当按钮超过2个时，此脚本会创建一个操作菜单下拉列表。
函数溢出下拉列表（）{
//定义我们将在其中操作的上下文。
var list=$（'.original action menu ul'）.clone（）；
$（'.original action menu'）.hide（）；
if（$（'.action menu'）.length）{
$（'.action menu'）.remove（）；
}
//我们将在此处存储任何要移动的项目。
var itemsToMove=新数组（）；
//获取窗口宽度
var windowWidth=$（window.width（）；
//定义屏幕上适合的项目数量
var itemsFit=1；
如果（窗口宽度>450）{
项目f it=2；
}
如果（窗口宽度>600）{
项目f it=3；
}
//循环遍历所有项并检索索引
$。每个（$（'li'，列表），函数（索引，值）{
//将除第一项之外的所有内容添加到items\u to\u移动数组中。
如果（索引>（项目字段-1））{
itemsToMove.push（值）；
}
});
//如果要移动多个项目，我们将在此继续。
如果（itemsToMove.length>1）{
//添加我们的新容器div。
$（列表）.append（“
”）；
//对于需要移动的每个项目，请将其放置在新创建的awesomebox下拉列表中。
$.each（项目移动、函数（索引、值）{
$（'#下拉操作菜单ul'，列表）.append（值）；
$（“#下拉操作菜单”）.hide（）；
});
}
list.insertAfter（“.original action menu”）；
列表。wrapAll（“”）；

---

})

我想你可能想读一下这篇文章，调整大小事件有一秒的超时，所以我想这不是问题……我认为问题在于我正在更改DOM，调整大小后我需要DOM，因为它在初始加载时是这样的。现在，我正试图找到一个解决方案，在再次执行overflowDropdown函数之前，首先以某种方式还原/撤消它。还是更明智的做法是存储原始DOM是一个变量，并在再次执行函数之前检查它？

// This script creates a dropdown of the action menu, when there are more then 2 buttons.

function overflowDropdown() {

  // Define the context we will be operating in.
  var list = $('.original-action-menu ul').clone();
  $('.original-action-menu').hide();



if ( $('.action-menu').length ) {
    $('.action-menu').remove();
  }

  // We will store any items here that we want to move.
  var itemsToMove = new Array();

// get window width
var windowWidth = $(window).width();

// define how much items fit on the screen
var itemsFit = 1;

if (windowWidth > 450) {
  itemsFit = 2;
}
if (windowWidth > 600) {
  itemsFit = 3;
}

// Loop through all items and retrieve the index
$.each($('li', list), function(index, value) {

  // Add everything except the first item to the items_to_move array.
  if (index > (itemsFit - 1)) {
   itemsToMove.push(value);
  }

});

// If there is more than one item to move we proceed here.
if (itemsToMove.length > 1) {
// Add our new container div.
  $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

  // Foreach items that need to moved place them in the newly created awesomebox dropdown.
  $.each(itemsToMove, function(index, value) {
    $('#dropdown-action-menu ul', list).append(value);
    $('#dropdown-action-menu').hide();
  });
}

list.insertAfter('.original-action-menu');
list.wrapAll('<div class="action-menu">');