使用 IntersectionObserver 运行clearInterval

Question

我有一个简短的代码，仅当元素在视图中时运行

setInterval

，但由于某种原因，当元素离开视图时它不会取消。我不知道我是否误解了

InteractionObserver

或者为什么

clearInterval

不起作用，但如果我登录

else

它会记录到控制台。

         let callback = (entries, observer) => {
            entries.forEach(entry => {
                let intval;
                if(entry.isIntersecting) {
                    const functionToRun = () => {console.log('running');}
                    intval = setInterval(functionToRun, random(500, 2000))
                } else {
                    clearInterval(intval);
                }
            })
        }
        let observer = new IntersectionObserver(callback, {
            threshold: [0.1]
        });
        observer.observe(elementToObserve);

Answer 1

每次项目进入/退出视口时都会调用观察者回调。

每次调用回调时都会创建 intval，因此您丢失了对之前在 setInterval 中获得的 timeoutId 的引用。

为了解决这个问题，建议使用 WeakMap 存储对 timeoutId 的引用，其中键是元素，示例如下：

const map = new WeakMap();
if (entry.isIntersecting) {
    map.set(entry.target, setInterval(functionToRun, random(500, 2000)));
} else {
    clearInterval(map.get(entry.target));
}