javascript - 有人可以解释一下这个脚本的作用吗？

Question

当我访问我正在构建的 Rails 网站的主页时，加载需要几秒钟。假设 2 秒后它加载了视觉效果，之后由于某种原因它又忙了 2 秒(我认为加载 JavaScript)。如果我在第 2 秒和第 4 秒之间向下滚动，那么在第 4 秒之后它会自动弹出回到页面顶部。所以这有点烦人，特别是因为每次访问主页时都会发生这种情况(不仅仅是第一次访问它)。

在尝试删除页面的各个部分后，我找到了原因。我正在使用网站模板来开发我的网站。主页顶部的这个模板使用以下脚本:

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

当我删除这个脚本时，所描述的行为就消失了。但我不知道这个脚本是做什么的，也不知道它为什么在那里。如果可以删除它，有人可以建议吗？

Answer 1

让我们分解一下。

首先，代码向窗口添加了一个监听器。加载窗口时，它将触发传递给 addEventListener 的函数。

addEventListener("load", function() {
  // Code here will run when the page loads
});

然后代码定义了一个名为hideURLbar 的函数，调用时会从顶部滚动到一个像素(使用window.scrollTo)。这似乎适用于移动设备，因为它们会显示 URL 栏，直到用户向下滚动一点。 1px 一定够了。但是，不会立即调用此函数。

function hideURLbar(){
  window.scrollTo(0,1);
}

加载页面后，函数 hideURLbar 被传递给 setTimeout，超时为零毫秒。

setTimeout(hideURLbar, 0);

使用零超时的 setTimeout 告诉浏览器尽快调用 hideURLbar，但它应该首先完成它正在做的任何事情。这通常用于将某些东西“踢”到浏览器的后台，这样它们就不会打断浏览器可能正在做的其他事情。

等待加载事件和使用 setTimeout 的组合意味着在您的浏览器完成加载其他所有内容之前不会触发此代码。届时，如果您已经向下滚动，您将返回到页面顶部。

这是糟糕的代码，更好的方法是仅在滚动位置位于最顶部时才执行类似的操作，如下所示:

function hideURLbar(){
  if (window.scrollY == 0) window.scrollTo(0,1);
}