javascript - 淡入具有特定类的 div 的通用代码，在第一次运行后删除函数

Question

我正在尝试创建一个通用函数，它可以在我的站点中放置一次并跨多个页面工作，既美观又轻便。

我希望能够使网站上的某些 div 在滚动到它们上方 10 像素时淡入。

我想通过简单地向我的 div 添加以下属性来做到这一点:

.fade-in-block #specific-block-name

我的想法是，我可以浏览该站点，添加此类和一个 ID，然后动画就可以运行了。

除了一件事，我几乎让它正常工作，在调用该函数后，滚动监听不断地继续到 console.log。我不喜欢这样，因为感觉它会不断尝试应用动画，从前端不会真正看到它，但我觉得幕后不断的数学运算可能会减慢速度。

这是我的 jQuery:

$('body .fade-in-block').each(function(){
            var block = '#'+$(this).attr('id');
            console.log('Block class is = '+block);
            var offset = $(block).offset().top;
            var $w = $(window).scroll(function () {
                if ($w.scrollTop() > offset - 10) {
                    console.log('reached block turn-on point for '+block);
                    $(block).removeAttr('id'); // remove the ID from the element so the script doesn't continue to find the element
                    // fade and rise animation here
                }
            });
        });

这是一个 JSFiddle .它工作得很好，但一旦你点击该 block ，你就会看到它不断记录滚动的每个像素。

一旦事件发生，我试图通过从元素中删除选择 id 来解决这个问题，但它继续运行。

Answer 1

滚动和调整大小事件都有这个问题，据说解决方案是debouncing .但是，我从来没有真正去抖动以正常工作。相反，我通常会创建一种开关，一旦滚动条件被激活，它就会关闭。在您的情况下，由于您有多个元素，因此您需要为每个元素分配一个开关。

$(window).on('scroll', function(){
    $('.fade-in-block').each(function(){
        var appear = $(this).attr('data-appeared');
        if(!appear){
            $(this).attr('data-appeared', true);
            //do something to $(this)
        }
    })
})

这里我在数据属性出现后添加它，并在它出现后再次检查它。