Question

所以，直接来说。我将2 containers与100vh一起使用，但是当您从第一个容器中单击按钮时，第二个容器将被渲染。按钮单击事件功能还有这一行：window.scrollTo(0,document.body.scrollHeight);，这让我滚动了底部。现在的问题是，单击时，我从api获取信息，这需要一些时间，并且由于javascript是asynchronous，即使我将滚动功能放在函数的底部，滚动功能也会在等待信息加载并渲染第二个容器之前自行执行。有人可以告诉我该如何解决？

编辑：因此，这里有一些附加信息。.根据布尔变量显示第二个容器。.在回调函数中，将该值设置为true。

这是我的操作方式：

.then(res => {
    res.forEach(data => {
        ...
    }

    if (Object.keys(res).lenght > 1) {
        this.isTrack = false
        this.displayTracks = true   <!-- Second's container bool variable -->
        window.scrollTo({top: 5000, behavior: 'smooth'});
    }
})

Answer 1

一种解决方案是在API请求的回调中触发scrollTo，或使用async/await等待请求完成，然后触发滚动。

在您的API请求的回调中触发它，看起来像这样：

fetch('someUrl')
   .then(() => {
     window.scrollTo(0,document.body.scrollHeight)
   });

Answer 2

正如您所说，由于javascript是异步的，因此您必须等待事件结束。此过程通常由javascript中的callback functions处理。回调函数是在async调用返回时调用的函数。您可以向下滚动到回调函数内页面的最底部，这样就不必担心同步它们。

呈现新容器后，滚动到页面底部

2 个答案: