Javascript：DOM操作完成时的事件答案

【问题标题】：Javascript: Event when DOM manupulation is doneJavascript：DOM操作完成时的事件
【发布时间】：2010-12-15 11:10:01
【问题描述】：

我们有一个通过 Ajax 调用填充的表。在我们的 Watin 测试中，我们要检查该表的内容。我们已经设法找出填充表的 javascript 何时停止运行，因此该部分工作正常。但是，在 IE 中，在 javascript 填充 DOM 完成与 DOM 完全更新以供 Watin 检测更改之间似乎存在延迟。

现在我们有一个Thread.Sleep(500) 来完成这项工作，但我不喜欢这样。在 DOM 完全更新的那一刻，是否有要捕捉的事件或东西？

编辑：示例代码

var tbody = $("#myID tbody");
tbody.empty();
$.each(item.Producten, function (i, item) {
    var row = "<tr><td>" + item.Property + "</td></tr>";
    tbody.append(row);
});

【问题讨论】：

您能否包含一些示例代码来演示如何在 javascript 中添加新内容？

标签： javascript watin

【解决方案1】：

我不认为有这样的事件。如果是，WatiN 会使用它。但是当 WatiN 等待某些东西时，例如。当您使用WaitUntil 方法时（有时您可以间接使用它，例如在读取Exists 属性时），WatiN 只是在循环中调用Thread.Sleep（请参阅TryFuncUntilTimeOut 类）。

使用WaitUntil 方法几乎可以实现您需要的一切，但有时确实很棘手。如果我是你，我会尝试更多地使用这种方法（尤其是如果你是 WatiN 的新手），但如果需要太多时间，我会使用 Thread.Sleep(500) 并忘记它。

我想补充一点，如果有可能在示例代码的末尾添加一些用于测试目的的 javascript 代码，您可以设置某种标志，例如 loadingCompleted = 1，并使用 TryFuncUntilTimeOut (我不记得是否有合适的WaitUntil 方法）等到loadingCompleted 设置为1。当然你可以使用WatiN 来读取这个变量——参见Document.Eval 方法。

【讨论】：

很好的建议，但遗憾的是，它们都没有奏效。不得不去Thread.Sleep(2500)...

【解决方案2】：

你试过.WaitUntilExist这个方法了吗？

编辑：添加示例代码

在你的 JS 中你可以添加一个类：

var tbody = $("#myID tbody");
tbody.empty();
$.each(item.Producten, function (i, item) {
    var row = "<tr class='newRow'><td>" + item.Property + "</td></tr>";
    tbody.append(row);
});

在WatiN方面：

Table table = Browser.Table("myID");
table.OwnTableRow(Find.ByClass("newRow")).WaitUntilExists();

备注：

如果你的表是空的，你可以在约束中使用Find.Any
如果Find.ByClass 不起作用（我知道它有一些问题），请使用另一个特定约束：Find.ByIndex、Find.ById 等。

【讨论】：

很遗憾，不，因为我们在表格中添加了行（请参阅添加到问题中的代码）
考虑了一下，但表中总是有行。我没有真正的钩子来查看新行是否已添加到表中。我正在寻找的是来自客户端的一些我可以收听的事件，表明 IE 已完成更新 dom

【解决方案3】：

这是与 prostynick 建议的相同的答案。

为什么不给 tbody 一个像 data-uniqueId 这样的属性，并且每次在你的 javascript 代码末尾都给它一个不同的值。它可能与当前日期时间一样简单，只要它与以前的值不同即可。

现在你有了这个属性和值，你可以在WatiN中使用它：

var currentUniqueId = browser.Table("myID").TableBody.GetAttributeValue("data-uniqueId");
.... do something to trigger the AJAX call

browser.Table("myID").TableBody.WaitUntil(!Find.By("data-uniqueId", currentUniqueId);

在第一行中，我们检索 data-uniqueId 的值。在最后一行中，WatiN 一直等待，直到没有具有该属性的 tbody 具有该值（因为您的 javascript 代码更改了 data-uniqueId 值）。现在我们可以继续了。

HTH, 杰伦

【讨论】：