javascript - 使用递归函数 Vanilla Javascript 节流显示 div 和子项

Question

最初我有一个包含许多子元素的巨大 div，它是 display: none 然后我将它简单地设置为 display: '' 并且整个 div 将是可见的。这造成了一些明显的滞后。我想通过超时一个一个地显示元素来限制它，但我创建的函数会导致奇怪的行为。如果您删除 setTimeout 但没有 setTimeout ，它实际上工作正常，仍然存在相同的延迟。

function throttleDisplay(page) {
    page.style.display = '';
    var children = page.children;
    if (!children.length) return;
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        setTimeout(function() {
            throttleDisplay(child);
        }, 100);
    }
}

Answer 1

几个问题。

1. 揭示顶层 <div>通过设置一次全部 display:block (或 display:'' )将仅触发一个页面的重排和重绘，因此与递归显示子项相比会产生更少的“滞后”，后者会以指数级的重排和重绘破坏您的布局。

2. setTimeout (及其回调)为 for 中的每个 child 调用或多或少地同时循环(在一个递归层)，因此这会限制显示后代元素，而不是兄弟元素。

3. 除非树中的每个元素都以 display:none 开头, 将顶级元素设置为 display:''无论如何，这棵树会一下子显露出来。

您确定要显示顶级 <div>是你滞后的原因吗？ 代码示例可能有助于社区找到问题的根源。第一个建议是包装更改 display 的代码。在 requestAnimationFrame 里面. ( MDN on rAF )

注 1A:我说“指数”是因为您分别显示每个子元素与一个容器元素，但当然操作的数量相对于后代总数是线性的，忽略它们的相对“容器”/“包含” "状态。

注意 1B:此代码不一定会“破坏”您的布局；您正在对布局执行一系列“写入”，现代浏览器可能会在帧末尾自动对布局进行批处理，前提是所有函数调用都可以在帧空间(~17ms)内处理，我们只谈论非节流的 sibling 揭示。异步节流将允许从代码的其他部分“读取”，从而强制重新流动，但由于延迟已经是 5 帧的长度，因此这是无关紧要的。关键是这段代码不会减少任何类型的“滞后”。