如何延迟el.classList.remove？

Question

如果您在滚动时看到图像，则它被设置为动画。如果我看不到图像，我会让它们 return 回到原来的状态，但我想给它们“五秒”延迟，而不是“立即”。我试图延迟，但失败了。有没有人可以帮忙？这是一个例子。

window.onload = function () {
            const targets = document.querySelectorAll('[data-observer]')
            const images = document.querySelectorAll('[data-img]')
            const options = {
                rootMargin: '0px',
                threshold: 1.0
            }
            const addClass = (el) => {
                if (!el.classList.contains('is-visible')) {
                    el.classList.add('is-visible')
                }
            }
            const removeClass = (el) => {
                if (el.classList.contains('is-visible')) {
                    el.classList.remove('is-visible')
                }
            }




            const doThings = (entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        addClass(entry.target)
                    } else {
                        removeClass(entry.target)
                    }
                })
            }
            const observer = new IntersectionObserver(doThings, options)
            const observer2 = new IntersectionObserver(doThings, {
                ... options,
                threshold: 0.4
            })
            targets.forEach(target => {
                observer.observe(target)
            })
            images.forEach(target => {
                observer2.observe(target)
            })
        }

Answer 1

设置超时

全局setTimeout()方法设置一个计时器，一旦计时器到期，它就会执行一个函数或指定的代码段。（来自 MDN）

用法

setTimeout(function, delay);

更好地解释 here。

Answer 2

兄弟，使用 Thread.sleep() 延迟。

如何延迟el.classList.remove？

How to delay el.classList.remove?

javascript

jquery

delay

设置超时

用法