当 innerHTML 100% 完成时调用 Javascript 函数的事件答案

【问题标题】：Event To Call Javascript Function When innerHTML has 100% completed当 innerHTML 100% 完成时调用 Javascript 函数的事件
【发布时间】：2011-11-23 12:08:13
【问题描述】：

我在标题上快速谷歌了一下，结果被所有这些我一个字都不懂的代码搞砸了。

我从事 JavaScript 编程已有几年了，对大多数概念都很熟悉。除了事件处理。吓死我了！

问题

我有一个 div，我为它编写了一个脚本，它完全根据鼠标位置垂直滚动 div。

我得到了容器的高度，以及将“溢出”的内部容器的高度。

将它们除以得到“差分”，然后将鼠标位置乘以该差分，以使 div 根据鼠标位置滚动。

它给了我一个漂亮干净的卷轴！

（如果有人想了解更多信息，请询问）

我的问题是。这个div的内容是ajax生成的。

因此，当运行计算内部和外部 div 高度的代码时，它给出的高度不正确，因为它们还没有被数据填充。

所以当 ajax 将数据复制到 innerHTML 以调用 mousescroll 函数时，我需要触发一个函数。

额外

问题：我有两个填充可滚动 div 的 ajax 调用。有时一个在另一个之前被提取，反之亦然。所以我需要 mousescroll 函数来触发 WHEN 并且只有当两个 ajax 调用完全将所有数据输入到 html 中时！

我正在考虑只添加一个 setTimeout，但是...我不喜欢强迫我的脚本等待！

【问题讨论】：

您是否使用任何框架/库/实用程序函数进行 ajax 调用？
即使我正在尝试同样的工作，我正在使用 .net 4.0。好问题，解决方案会很有趣:)
起初我不想依赖 jquery，但在意识到我懒得修复跨浏览器依赖后 cough IE cough 我决定使用 jquery-1.7.1
您应该更改帖子的标题，因为您不是在谈论自定义 Javascript 事件（这意味着非常具体的事情）。我会自己编辑它，但我不完全确定它应该是什么:)

标签： javascript jquery javascript-events

【解决方案1】：

我不是 100% 清楚问题出在哪里。你写道：“当 ajax 将数据复制到 innerHTML 以调用 mousescroll 函数时，我需要触发一个函数。” ——你需要这部分的帮助吗？如果您使用的是 jQuery，那么您只需在 $.ajax 的回调函数 success 内调用 mousescroll 函数即可。

但是，正如您所指出的，您提出的另一个问题使这变得复杂：实际上有两个 Ajax 调用，您希望它们 both 在调用 mousescroll 函数之前完成。要解决这个问题，只需创建一个等于 0 的变量，然后在两个 success 回调中递增它。这些回调也会检查变量的值，如果它等于 1（意味着 Ajax 调用已经完成），则调用 mousescroll 函数。

伪代码：

var numOfAjaxCalls = 0;

$.ajax({
    ...
    success: function(){
        if(numOfAjaxCalls = 1){
            mousescroll();
        }else{
            numOfAjaxCalls++;
        }
    }
});

【讨论】：

很抱歉给您带来了困惑。基本上我需要在 ajax 获取数据时运行一个函数。然而。我的 ajax 函数获取大量 json 数据，对其进行解析，然后使用 .innerHTML 方法，将解析后的数据插入到容器中，现在这种情况发生了两次。我考虑过在“成功”命令上触发该功能，但是......当收到 ajax 或 innerHTML 功能完成时是否触发成功事件？因为我真的需要确保容器在开火前是满的。并且“成功”似乎仅在请求成功时才被调用！谢谢
@AlexMorley-Finch：我认为 innerHTML 是同步的，因此无法处于“innerHTML 尚未完成”的状态
@AlexMorley-Finch - 成功处理程序在 ajax 调用完成（并且成功）时触发。因此，您可以在成功处理程序中解析 JSON 并注入 HTML。

【解决方案2】：

根据您的描述，您需要在 jQuery 成功事件中处理 ajax，然后在两个 ajax 事件完成并根据您的要求正确处理后处理代码中的实际“完成”事件。

【讨论】：