时间戳

首页 > 解决方案 > 滚动到某个点时无限次触发事件

javascript - 滚动到某个点时无限次触发事件

问题描述

我有几个 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 )
    }
});

虽然我想确保事件只触发一次，但我无法实现它。你能借给我一些帮助吗？谢谢。

标签： javascriptjqueryscroll

解决方案

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

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，这样即使在函数结束后它的状态也存在。

推荐阅读