如何防止重复触发自定义事件–或可以“重置” jQuery .one（）函数？

Question

我有一些代码，用于检查屏幕上某个元素的可见性。 通过滚动页面一看到，就会触发自定义事件。 此自定义事件将启动动画。 为防止该动画在启动函数中反复启动，它只能启动一次。 为此，我使用了jQuery函数.one（）。

检查元素是否可见的函数：

checkScrollPos = function() {
    if (objTopPos - scrollPos <= windowHeight / 2) {
        $(document).trigger('objVisible');
    }
}

监听事件的函数：

evtListener = function() {
    //startAnimation() should only be started once
    $(document).one(
        {
            'objVisible': function(event) {
                startAnimation();
            }
        }
    );
}

这一切都发生了：

$(document).ready(function() {
    evtListener();
    $(window).scroll(function () {
        scrollPos = $(document).scrollTop();
        checkScrollPos();
    }
}

现在，一切正常，但我扩展了checkScrollPos（）函数，还可以检查元素是否再次消失，然后停止动画。 很好用。 问题是，随着事件触发，事件绑定函数仅执行一次。 因此，当您在视线范围内滚动元素，然后在视线范围之外再滚动视线范围时，动画将不再执行（这是正确的行为）。 现在，我想让事件恰好触发一次，但每次元素都会进入或消失，而不仅仅是一次。 所以基本上我需要某种重置

$(document).one()

函数-每次元素不可见时，我都可以再次使用.one（）函数。 有什么办法吗？

Answer 1

每当元素消失时，就必须绑定objVisible事件。

只需在元素消失后调用evtListener() ， objVisible再次绑定objVisible事件。

您的代码将如下所示：

checkScrollPos = function() {
    if (objTopPos - scrollPos <= windowHeight / 2) {
        $(document).trigger('objVisible');
    }

    if (/* your condition to check if element is out of sight */) {
        evtListener();
    }
}