javascript - 滚动上的嵌套 setInterval 函数不起作用

Question

我正在尝试将间隔设置为仅当用户滚动到特定高度以下时才调用的函数。我的代码没有返回错误，并且该函数也没有运行。但是，我尝试在函数末尾记录一个随机数，但事实并非如此，所以我认为这与我的函数有关。看看:

var firstString = ["This ", "is ", " me."];
var firstPara = document.querySelector("#firstPara");
var distanceSoFar = (document.body.scrollTop);

window.addEventListener("scroll", function() {
  setInterval(slideIn, 450);
});

function slideIn() {
  if (distanceSoFar > "130") {
    for (var i = 0; i < firstString.length; i++) {
      var stringOut = firstString.shift();
      firstPara.innerHTML += stringOut;
      console.log("5");
    }
  }
};

firstPara 只是页面上 div 中的一个段落。因此，我们的想法是，当用户滚动到该 View 时，每隔一段时间在其中放置一些文本，如下所示:

body {
height: 1000px;
}

div {
position: relative;
top: 700px;
}

div #firstPara {
border: 1px solid;
}

Answer 1

您的部分代码正在运行。它正确处理 scroll 事件并调用 slideIn 函数，但从未满足条件 distanceSoFar > "130"。

我建议进行两项更改，以使您的代码按预期工作:

1. 使用document.documentElement.scrollTop而不是document.body.scrollTop。 document.body.scrollTop 在某些浏览器上可能会返回不正确的值 (0)。看at this answer ，例如。
2. 在 slideIn 函数内声明 distanceSofar。您在代码顶部声明了该变量，因此它存储 scrollTop 属性的静态值。

我会避免在 scroll 事件处理程序中使用 setInterval，您设置了很多间隔并且没有清除它们。我添加了一些 console.log 来向您展示即使用户没有滚动，如何保持调用 slideIn 函数。

最后提示:scrollTop 属性是一个数字，因此您可以将其与 130 而不是 "130" 进行比较。

这是working fiddle .