scrollIntoView dilaksanakan terlalu awal selepas forEach gelung
P粉504920992
P粉504920992 2023-09-17 00:27:54
0
1
670

Saya ada dua fungsi berikut...

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();
}
Elemen

sizeSearch()函数正常工作。当调用clearSizeSearch()函数时,所有的<li>元素按预期重新显示出来,你可以很短暂地看到预期的.active menatal ke dalam paparan, tetapi kemudian ia menatal kembali dengan serta-merta di atas elemen bekas (atau mungkin memaparkan semula dengan cara ini selepas DOM selesai diselesaikan?).

Jika saya menjalankannya secara manual dalam konsol document.querySelector('ul.size-ranks li.active').scrollIntoView();,然后运行clearSizeSearch(),那么它就正常工作。这一点,再加上当运行clearSizeSearch()时我可以短暂地看到它滚动到视图中,似乎表明它可能在前面的命令执行完成之前运行,但据我所知,forEach()Lalainya bukan tak segerak, sebarang arahan selepasnya tidak sepatutnya dijalankan sebelum ia selesai.

P粉504920992
P粉504920992

membalas semua(1)
P粉633733146

Ini penyelesaian saya.

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);
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan