scrollIntoView wird nach der forEach-Schleife zu früh ausgeführt

Question

Ich habe die folgenden zwei Funktionen...

function sizeSearch(size) {
    const container = document.querySelector('ul.size-ranks');
    const rankElems = container.querySelectorAll('li');
    rankElems.forEach(e => {
        e.style.display = 'none';
        e.classList.remove('active');
    });

    const sizeID = size.replace(/\D/g,'') + '-rank';
    const sizeElem = document.getElementById(sizeID);
    if (sizeElem) {
        sizeElem.classList.add('active');
        sizeElem.style.display = '';
    } else {
        container.insertAdjacentHTML('beforeend', '<li class="empty-search">尺寸未找到</li>');
    }
}

function clearSizeSearch() {
    document.querySelectorAll('li.empty-search').forEach(e => e.remove());
    document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = '');
    document.querySelector('ul.size-ranks li.active').scrollIntoView();
}

Das

sizeSearch()函数正常工作。当调用clearSizeSearch()函数时，所有的<li>元素按预期重新显示出来，你可以很短暂地看到预期的.active-Element wird in die Ansicht gescrollt, aber dann scrollt es sofort wieder über das Containerelement zurück (oder wird möglicherweise auf diese Weise erneut gerendert, nachdem sich das DOM vollständig stabilisiert hat?).

Wenn ich es manuell in der Konsole ausführe document.querySelector('ul.size-ranks li.active').scrollIntoView();，然后运行clearSizeSearch()，那么它就正常工作。这一点，再加上当运行clearSizeSearch()时我可以短暂地看到它滚动到视图中，似乎表明它可能在前面的命令执行完成之前运行，但据我所知，forEach()Die Standardeinstellung ist nicht asynchron. Kein Befehl danach sollte ausgeführt werden, bevor er abgeschlossen ist.

Answer 1

这是我的解决方案。

function clearSizeSearch() {
    document.querySelectorAll('li.empty-search').forEach(e => e.remove());
    document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = '');
    setTimeout(() => {
        document.querySelector('ul.size-ranks li.active').scrollIntoView();
    }, 0);
}