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中的一个段落。因此，当用户像这样滚动到该视图时，想法是在间隔中放置一些文本

body {
height: 1000px;
}

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

div #firstPara {
border: 1px solid;
}

Answer 1

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

我建议进行两项更改，以使您的代码按预期运行：

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

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

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

这是working fiddle。

Answer 2

我尝试了你的代码。我认为它按预期工作。我还添加了一个clearInterval，以便在打印所有文本后清除计时器，并避免重复调用。

<html>
   <head>
   <style>
        body {
        height: 1000px;
        }

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

        div #firstPara {
        border: 1px solid;
        }
   </style>
   <script>
       function start(){
          var s =0;
          var interval =  undefined;
           function slideIn() {
           console.log(distanceSoFar);
              if (distanceSoFar > "130") {
                while ( firstString.length > 0) {
                  var stringOut = firstString.shift();
                  firstPara.innerHTML += stringOut;
                  console.log(s++);
                }
                clearInterval(interval);
                interval = undefined;
              }
            };

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

            window.addEventListener("scroll", function() {
            if(!interval)
              interval = setInterval(slideIn, 450);
            });
       };



   </script>
   </head>
   <body onload="start()">
    <div id="firstPara"/>
   </body>
  <html>

滚动时嵌套的setInterval函数不起作用

2 个答案: