javascript 当元素为NotIntersecting时，如何clearInterval()？

xuo3flqw 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(127)

为了帮助您理解我的代码，我有几个<div class="sheet">，每个<div class="sheet">的大小都是viewport的100%。在每个div中，都有一个段落，每个字母都有一个.char类。使用我的代码，我可以在<div class="sheet">的文本进入视口时立即在其上再现打字机效果。但是，即使离开视口，此动画也不会停止。

const storyChars = new SplitType('.storyline', { types: 'chars' });

const sheets = document.querySelectorAll('.sheet');

function lettersReveal(entries, observer) {

    entries.forEach((entry) => {
        let autoTyper;
        
        const sheetDiv = entry.target;
        const letters = sheetDiv.querySelectorAll('.char');

        let i = 0;

        console.log(entry.isIntersecting);

        function autoTyping() {
            if (i < letters.length) {
                letters[i].classList.add('fade')
                i++;
            }
        }

        if (entry.isIntersecting) {
            autoTyper = setInterval(autoTyping, 100);

        } else {
            clearInterval(autoTyper);
        }
    });
}

const options = {
    root: null,
    threshold: 0.25
};

const observer = new IntersectionObserver(lettersReveal, options);

sheets.forEach((sheet) => {
    observer.observe(sheet);
});

我想在<div class="sheet">的文本在视口中不再可见时立即停止该文本上的动画，并在<div class="sheet">再次可见时重新启动动画。

JavaScript

来源：https://stackoverflow.com/questions/76510047/how-to-clearinterval-when-element-isnotintersecting

1条答案

按热度按时间

zmeyuzjn1#

看起来像autoTyper变量的作用域问题。
尝试在函数外部声明它。
这意味着您需要以另一种方式编写“sheets”循环，以便每个循环示例都有一个“autoTyper”变量。

const storyChars = new SplitType('.storyline', { types: 'chars' });

const sheets = document.querySelectorAll('.sheet');

sheets.forEach((sheet) => {

    let autoTyper;

    const letters = sheet.querySelectorAll('.char');

    let i = 0;

    function autoTyping() {
        if (i < letters.length) {
            letters[i].classList.add('fade')
            i++;
        }
    }

    function lettersReveal(entries, observer) {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                autoTyper = setInterval(autoTyping, 100);

            } else {
                if (autoTyper) clearInterval(autoTyper);
                i = 0;
            }
        });
    }

    const options = {
        root: null,
        threshold: 0.25
    };

    const observer = new IntersectionObserver(lettersReveal, options);

    observer.observe(sheet);
});

我还移出了autotyping函数，没有必要在每次运行lettersReveal函数时都重新创建它。
我没有测试上面的代码。希望它现在能像你希望的那样工作。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 当元素为NotIntersecting时，如何clearInterval()？

1条答案

相关问题

热门标签

最新问答