jQuery连续检测距离顶部的DIV距离

我试图只在DIV在页面中可见时启动一些动画

这就是我所做的功能：

function startAnimations() {

    if (animated_contents)
        jQuery.each(animated_contents, function(index, arr) {
            var item = jQuery('#' + arr[1]);
            var page_id = arr[0];
            setInterval(function() {
                var visible_window = jQuery(window.top).height();
                var top = item.offset().top - jQuery(document).scrollTop();
                console.log(item + visible_window + top);
                if (top < visible_window)
                    animateEl(arr[1], arr[2], arr[3], arr[4]);
            }, 500);
        })
}

函数startAnimations（）{
if（动画内容）
jQuery.each（动画内容、函数（索引、arr）{
var item=jQuery（“#”+arr[1]）；
var page_id=arr[0]；
setInterval（函数（）{
var visible_window=jQuery（window.top）.height（）；
var top=item.offset（）.top-jQuery（document.scrollTop（）；
控制台日志（项目+可见窗口+顶部）；
如果（顶部<可见窗口）
animateEl（arr[1]，arr[2]，arr[3]，arr[4]）；
}, 500);
})
}

它起作用了。问题是

setInterval

必须始终运行，我担心它会合理地减少资源。 有更好的办法吗？ 请考虑这些项目是创建的，所以它必须是一个连续检查。

---

感谢您的建议

使用并检查div的位置以运行动画。

我尝试了好几次，但都不起作用。它不会持续检查。也许我应该将滚动事件绑定到每个不同的项目。你认为呢？