时间戳

首页 > 解决方案 > 如何仅在滚动进入特定部分时设置间隔并立即清除？

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

问题描述

下面有这段代码，非常简单：

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

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

标签： javascriptjqueryscrollclearinterval

解决方案

实际上，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元素都将在每个间隔上获得一个添加的类......并且在最后一个间隔上，它们都将具有从p0to的类p19。

最后，whentempCls < 20为 false，即清除区间的时间。

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

推荐阅读