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事件。

您的代码将是这样的：

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

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

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

1 个答案: