Question

我正在编写一个脚本，该脚本可以向下滚动页面以完全加载页面以进行进一步处理，它具有以下非常基本的功能，滚动跳转到底部，但无法加载介于两者之间的所有内容

xib

所以我已经用while(document.documentElement.scrollTop <= document.body.scrollHeight-500){ window.scrollTo(0, document.documentElement.scrollTop+500); }对其进行了修改，因此它可以更慢地滚动并为页面加载时间留出时间。

setTimeout

现在它以无限循环结束，我假设由于异步以某种方式跳出。

如何修改上面的脚本以使其缓慢向下滚动，从而可以加载所有内容？或者只是强制页面以其他方式加载所有内容

Answer 1

setTimeout(func, n)排队func，以至少（ n ）毫秒为单位。

所以您的第二种方法基本上是

while (document.documentElement.scrollTop <= document.body.scrollHeight - 500) {
  addAnotherTimeout();
}

循环中的代码对循环的条件没有影响，这就是为什么在这里得到无限循环的原因。

以下是递归版本（类似）：

var scrollTimeout;
function scrollElement(){
    clearTimeout(scrollTimeout);
    if(document.documentElement.scrollTop <= document.body.scrollHeight-500){
        window.scrollTo(0, document.documentElement.scrollTop+500);
        scrollTimeout = setTimeout(scrollElement, 300);
    }
}

// start the scrolling:
scrollElement();

循环/递归本身不需要clearTimeout()开头带有scrollElement()的部分，但是可以防止多个并发循环。

如果您开始第二个循环而上一个循环还没有结束，请杀死上一个循环。

Answer 2

一个选择是将其放入async函数中，并将await放在while内部300ms后解决的承诺中：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
(async () => {
  while (document.documentElement.scrollTop <= document.body.scrollHeight - 500) {
    window.scrollTo(0, document.documentElement.scrollTop + 500);
    await delay(300);
  }
})();

具有setTimeout的window.scrollTo进入无限循环，但在没有setTimeout的情况下可以正常工作

2 个答案: