Question

我试图创建＆＃34;无限滚动＆＃34;的实现。这是我的相关代码：

var postsIndex = 0;
var chunk = 5;

function getNextChunk() {
    for (i=0; i<chunk; i++) {
        postsIndex++;
        document.write(getTimeLineElement(posts[postsIndex]));
    }
}

if (postsIndex === 0) {  // initial chunk.
    var contentDiv = document.createElement("DIV"); // Create the div container.
    var divTextNode = document.createTextNode(getNextChunk()); // Create a text node with the initial chunk.
    contentDiv.appendChild(divTextNode); // Append the text node to the div container.
    contentDiv.style.border="solid";
}

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        alert("near bottom!");
        contentDiv.appendChild(getNextChunk());
    }
});

初始块加载很好，第二块的加载被触发就好了。但是，当第二个块加载时，原始内容将丢失，只留下附加的内容。正如您所看到的，我已经在div周围放置了一个边框用于测试目的。我没有看到那个边界。我不确定为什么。这可能表明，不管怎样，整个事情都不在div元素中，就像我认为的那样。谁能告诉我我失踪了什么？感谢您的任何意见。

... doug

Answer 1

您的函数getNextChunk在文档加载后的不同时间调用，它本身调用document.write。如notes in MDN's document.write documentation中所述，当针对已加载的文档调用时，document.write会对document.open进行隐式调用。 Notes in the MDN documentation for document.open表示当针对现有文档调用时，document.open会清除该文档。

因此，您的功能是在插入内容之前擦除文档。

我不知道你期望做什么，无论如何......你在传递函数时调用appendChild。这意味着函数的返回值将被传入 - 但它不会返回任何内容...... 和它在循环中调用document.write ... && ＃39; s真的遍布整个地图。

Answer 2

我们将从不符合您期望的行开始。

contentDiv.appendChild(getNextChunk());

这是什么意思？

这意味着，执行getNextChunk函数和返回的任何内容，将其作为contentDiv的子项添加到DOM。

那么，getNextChunk会返回什么？

function getNextChunk() {
    for (i=0; i<chunk; i++) {
        postsIndex++;
        document.write(getTimeLineElement(posts[postsIndex]));
    }
}

据我所知，该代码实际上并没有返回任何内容。因此，您将 nothing 添加为内容div的子项。

那么什么是添加到DOM？

您正在调用getTimeLineElement，但是将其返回值（假设它是一个字符串）直接添加到页面的HTML内容中。这不会进入div，而只是附加到文档中。

我做错了什么？

返回：您正在传递一个不返回任何内容的函数的返回值。
副作用：你有一个名为get*的函数，它建议它专门读取数据，但实际上会改变页面（称为副作用）。
数据类型：名为getTimeLineElement的函数的结果，它表明它返回一个DOM元素，实际上返回一个字符串。

始终了解您正在使用的数据类型以及它们如何在功能之间移动。

当我将appendChild添加到元素时，为什么删除了现有内容？

2 个答案: