javascript - 当 innerHTML 已 100% 完成时调用 JavaScript 函数的事件

Question

我在标题上快速谷歌了一下，然后被所有这些我一个字也听不懂的代码搞得一团糟。

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

问题

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

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

将它们相除得到一个“微分”，然后将鼠标位置乘以这个微分，使 div 根据鼠标位置滚动。

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

(如果有人想了解更多信息，请询问)

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

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

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

额外

问题:我有两个填充可滚动 div 的 ajax 调用。有时一个会先于另一个被获取，反之亦然。因此，我需要 mousescroll 函数在且仅当两个 ajax 调用已将所有数据完全输入到 html 中时触发!

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

Answer 1

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

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

伪代码:

var numOfAjaxCalls = 0;

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