javascript - jquery 动态生成的 .append() 有时会附加到错误的 div

Question

我有一个 jquery block ，它使用循环到 .append() div 元素来构建一个包含 40 多个元素的表单，该元素加载 .ajax() json。

10 次中有 9 次表单按预期呈现。然而随机的一些元素会遭受两种类型的错误

1. dom 元素将被创建但不会显示(源代码中未显示)(经过更深入的调查，似乎元素总是生成，只是错误的父级(2))
2. dom 元素作为子元素放置在错误的父元素中。

例如，id3 应该附加到 delta[14]，而是在 beta[3] 或 生成id3 应该在 gamma[6] 但根本不显示

构建的格式是

硬编码

<div id="alpha">
   <div id="beta"></div>
   <div id="gamma"></div>
   <div id="delta"></div>
</div>

doAppendStuff(beta, ajaxUrletc1);
doAppendStuff(beta, ajaxUrletc2);
...
doAppendStuff(gamma, ajaxUrletc10);
doAppendStuff(gamma, ajaxUrletc11);
...
doAppendStuff(delta, ajaxUrletc20);
doAppendStuff(delta, ajaxUrletc21);

动态

    function randId(baseID) {
        return baseID+"_"+Math.round(new Date().getTime() + (Math.random() * 555));
    }

    var id1= randId("myIdOne");
    var id2= randId("myIdTwo");
    var id3= randId("myIdThree");

    function doAppendStuff(elemId, ajaxUrletc){
    $('#' + elemId).append(
        '<div id="' + id1 + '" >' +
           '<div id="' + id2 + '">' +
              '<select id="' + id3 + '"></select>' +
            '</div>' +
        '</div>'
     );
    ... // log id1, id2,id3
    ... //do .ajax stuff + callback on id3

我已向每个循环添加回调以确保触发 .append 并且不会生成提示该元素不存在的错误。

运行跟踪，我可以看到正在生成每个元素的动态 ID。

代码本身按预期工作，其他 9/10 次按预期呈现。

笔记

1. 随机误差每次应用于不同的元素。没有关于什么元素失败的特定逻辑。
2. 我已将 ajax 调用与 dom 元素创建分开，因此元素创建应该没有瓶颈
3. 所有 ajax 调用都按预期的正确顺序启动。有些需要更长的时间，但其他元素无需等待即可按预期生成。所有数据成功返回。

通过重复调用同一个函数来生成多个 dom 元素是否存在任何已知问题，或者是否可以添加一个监听器以确保在通过回调继续下一次调用之前在所需位置正确生成元素。

更新

添加 id1、id2、id3 的日志记录后，日志确认正在分配正确的动态 ID。然而，似乎内存中的 var 被替换为以前的值，或者 js 引擎由于计时而放置在错误的生成位置。

更新 2

经过更多调试后，我们更改了随机字符串并增加了

return baseID+"_"+Math.round(new Date().getTime() + (Math.random() * 555));

到

return baseID+"_"+Math.round(new Date().getTime() + (Math.random() * 99999));

并且问题没有再次出现。所以看起来它可能是随机 ID 冲突，同一字符串被生成两次，或者在函数重新初始化时以某种方式重用。有趣的是 ID 不是连续的，它通常会在重复使用相同的 ID 之前跳过几行。

所以我们已经解决了这个问题，但仍然不明白是什么导致了这个问题，欢迎任何想法。

Answer 1

如果您想要一个唯一的值，那么我们正在谈论 GUID。

Create GUID / UUID in JavaScript?

但是，如果您在时间和随机数之间放置下划线或其他值，我怀疑您会看到更少的碰撞。

时间 + 随机 = 某个 future 的时间段。

想象一下得到一个随机的 100，然后 100 毫秒后得到一个随机的 0。

"abc1506110581013_100"!= "abc1506110581113_0"

同时

"abc1506110581113"== "abc1506110581113"