Question

我有几个div，一个又一个，它们都很高，并且内部有动画元素。每个div内容的动画是同时发生的，但由于它们位于另一个div之下，因此只能看到第一个div元素的动画，并且当向下滚动到下一个div时，该动画已经发生并且它们好像它们没有动画。

我在这里发现了一个类似的问题，并找到了一个代码片段，我对其进行了修改，以便该事件仅发生一次（这是我想要实现的），并且由于该事件在滚动时到达目标元素时发生，因此条件为假时发生的代码如下：

$(window).scroll(function() {
    var chart2T = $('#chartdiv2').offset().top,
    chart2H = $('#chartdiv2').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
    if (wS > (chart2T+chart2H-wH)){

        do{
            alert('secondChart on the view!');
        }
            while( 1 > 2 )
    }
});

我想确保事件仅被触发一次，但是我却无法实现。你能帮我一些忙吗？谢谢。

Answer 1

如何使用标记来说明事件是否已经触发？

var alertShown = false;

$(window).scroll(function() {
    var chart2T = $('#chartdiv2').offset().top,
    chart2H = $('#chartdiv2').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
    if (wS > (chart2T+chart2H-wH) && !alertShown){ // check if alert was not already triggered

        do{
            alert('secondChart on the view!');//alert triggered once
            alertShown = true; // now it will no longer trigger
        }
            while( 1 > 2 )
    }
});

这个想法是让alertShown的作用域不在scroll函数的范围内，这样即使在函数结束后它的状态也仍然存在。

当滚动到达某个点时，事件将无限次触发

1 个答案: