如何仅在滚动进入特定部分时设置间隔并立即清除？

Question

下面有这段代码，很简单：

1. 用户滚动到某个部分，该部分被标记为 CSS 类“视图”
2. 当我到达特定部分“someClsOfSection”时，我想触发使用 setInterval 向某个元素添加 20 个不同的类
3. 每当我滚动时，条件都会满足，我不知道一旦进入此部分如何清除间隔... https://codepen.io/StevaNNN/pen/GRNOLyJ 这里是代码笔

const isFullySeen = el =>
    el && typeof el.getBoundingClientRect === 'function'
    && el.getBoundingClientRect()['top'] +
    window.scrollY + (window.innerHeight) <= window.innerHeight + window.scrollY;
    
$(document).ready(function () {
    $(window).scroll(function () {
        $('.section').each(function() {
            if (isFullySeen(this) === true) {
              $(this).addClass('in-view');
            }
            if(isFullySeen(this) && $(this).hasClass('.someClsOfSection')) {
              let tempCls = 0;
              
              let toTwentyPercent = setTimeout(function () {
                    setInterval(function () {
                        if (tempCls < 20) {
                            tempCls++;
                            $('.c100').addClass(`p${tempCls}`).animate();
                        }
                    }, 100);
              }, 1000);
              
              clearInterval(toTwentyPercent);
            }
        });
    });
});

Answer 1

实际上，setTimeout() 被分配给了toTwentyPercent... 但是之后就被清除了。所以它永远不会执行它的回调。此外，您要清除的是setInterval()。所以我建议你尝试一下：

let tempCls = 0;

setTimeout(function () {
  let toTwentyPercent = setInterval(function () {
    if (tempCls < 20) {
      $('.c100').eq(tempCls).addClass(`p${tempCls}`);
      tempCls++;
    }else{
      clearInterval(toTwentyPercent);
    }
  }, 100);
}, 1000);

所以在这里，脚本将等待 1 秒，然后将 setInterval() 分配给 toTwentyPercent。

然后，每 100 毫秒，将向 .c100 元素添加一个类。注意.eq(tempCls) 依次添加p0、p1、p2...。如果没有.eq() 方法，所有.c100 元素将在每个间隔上获得一个添加的类...在最后一个间隔上，它们都将拥有从p0 到p19 的类。

最后，当tempCls < 20为false时，就是清空区间的时间了。

我删除了.animate()，因为我不知道这是什么意图。该方法至少需要一个属性才能将动画设置为新值。没有任何争论是非常有用的。