在加载数据之前发生的模式插入

Question

我显示了一组记录，其中可以通过单击所需记录旁边的编辑链接来编辑单个记录的信息。单击链接后，我通过javascript插入编辑模式，并使用该记录的数据填充字段。

我发现大约 60% 的时间，字段显示 null，这意味着模态插入 DOM 的速度比我填充字段的速度快，我是通过 getAttribute(( 提取记录数据属性来实现的。它必须是毫秒的差异。每个编辑按钮都有一组数据属性：

<span class="edit-btn" data-id="gREwTytnO" data-month="11" data-year="2020" data-name="John Doe">
    <span class="fa fa-edit" aria-hidden="true"></span>Edit
</span>

这是模态中的一行：

<input type="text" placeholder="Month (mm)" class="month-field" id="month" value="' + event.target.getAttribute('data-month') + '" required>

然后我将其插入 DOM 中。看起来event.target.getAttribute()还没有完成从 DOM 中提取数据，执行继续并插入模态。

我有哪些选项可以确保在将模式插入 DOM 之前，所有属性都已加载？

Answer 1

一种选择，尽管可能有更有效的方法可以做到这一点，但在实际显示模态之前，将所有数据属性收集到显示模态的函数的本地变量中。

这样，您就不会最终遇到一个竞争条件，您希望event.target.getAttribute()可以在需要值之前完成其工作。