Javascript 代码在控制台中工作，但不是来自脚本

我有一个脚本，我正在运行，以检测flex包装的UL中的换行

在$（document）.ready调用之外的scripts.js文件顶部有一个javascript函数

var detectWrap = function(className) {
  var wrappedItems = [];
  var prevItem = {};
  var currItem = {};
  var items = document.getElementsByClassName(className);

  for (var i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();
    if (prevItem && prevItem.top < currItem.top) {
      wrappedItems.push(items[i]);
    }
    prevItem = currItem;
  };

  return wrappedItems;

}

var detectWrap=函数（类名）{
var wrappedItems=[]；
var previitem={}；
var currItem={}；
var items=document.getElementsByClassName（className）；
对于（变量i=0；i

在$（文档）内。准备呼叫，我有：

$( ".menu-item-has-children" ).click(function() {
      var wrappedItems = detectWrap('menu-item-object-practice-area');
        for (var k = 0; k < wrappedItems.length; k++) {
          wrappedItems[k].className = "wrapped";
        }
    });

$（“.菜单项有子项”）。单击（函数（）{
var wrappedItems=detectWrap（'menu-item-object-practice-area'）；
for（var k=0；k

如果我加载页面并单击“练习区”，我将一无所获。如果我打开控制台并输入以下内容，它可以正常工作：

var wrappedItems = detectWrap('menu-item-object-practice-area');
    for (var k = 0; k < wrappedItems.length; k++) {
    wrappedItems[k].className = "wrapped";
}

var wrappedItems=detectWrap（'menu-item-object-practice-area'）；
for（var k=0；k

我假设这与时间和/或加载的内容有关，但我没有将内容添加到DOM中……我只是添加了一个类

---

以下是站点供参考：

单击下拉菜单时，两个单独的事件处理程序会响应：

你的，用来测量包裹的物品

正在使用的库，以切换子菜单的显示

但是，由于无法管理这些命令，最终发生的情况是，在显示子菜单之前运行包裹检测器，如果子菜单尚未显示，则无法测量

getBoundingClientRect（）

，因为它不存在。一个简单的

console.log（currItem）

会揭示这一点

如果不能保证事件的顺序（使用库时很可能就是这样），那么应该将代码延迟一帧

$(".menu-item-has-children").click(function() {
    requestAnimationFrame(function() {
        var wrappedItems...
    });
});