滚动上的嵌套 setInterval 函数不起作用答案

【问题标题】：Nested setInterval function on scroll not working滚动上的嵌套 setInterval 函数不起作用
【发布时间】：2021-07-26 16:12:32
【问题描述】：

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

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;
}

【问题讨论】：

您的代码将在每次滚动时添加一个新的间隔事件。这是一种不好的做法。
@Rajesh 调用的函数有一个循环来检查是否应该首先调用它。如果条件不满足，则根本不调用。
试试这样的：JSfiddle
@Rajesh 似乎您的小提琴中的 clearInterval 函数不起作用，因为在每次滚动时，interval 函数都会一遍又一遍地触发。其次，我的代码中 for 循环的原因是检查匹配字符串数组是否弹出了不必要的字符。即使 firstString 字符已用尽，您的代码也会不断弹出和 shifting

标签： javascript dom dom-events setinterval

【解决方案1】：

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

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

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

我会避免在scroll 事件处理程序中使用setInterval，因为您设置了很多间隔而不是清除它们。我添加了一些console.logs 来向您展示slideIn 函数是如何在用户不滚动时继续被调用的。

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

这里是working fiddle。

【讨论】：

谢谢。虽然你的没有立即工作，但问题是变量 scrollTop 在全局范围内，并且设置为默认值 0，因此实际上没有满足条件。另一件事是，chrome 上的 scrollTop 属性同时接受字符串和数字，尽管您可能会认为使用数字更安全。最后，这个函数只被调用了 3 次，因为我在事件监听器中设置了一个 setInterval 函数的实例，所以它确实运行了一百万次。这是一个适用于我的小提琴jsfiddle.net/nmeri17/1Lw0vn1w
你也可以使用var distanceSoFar = document.body.scrollTop || document.documentElement.scrollTop;来检查不接受前者的浏览器。

【解决方案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>

【讨论】：