Question

我将一个滚动事件监听器附加到一个包装器div，然后为每个div附加一个＆＃34; js-chart＆＃34;它将检查该特定的js-chart是否在视图内并将对其执行一个函数。然后它将从该元素中删除js-chart类，以便它不会继续触发该函数。

这一切都很好，但我想做的是当所有的js图表都被触发时（因此没有更多元素与js-chart，完全删除滚动事件监听器）所以我不会一直开除无意义的检查。

$('#wrapper').scroll(function() {

        var $wrapper = $(this);

        $('.js-chart').each( function (n) {

            var $this = $(this);

            if ( $this.position().top + $this.height() > 100 && $this.position().top < $wrapper.height() ) {
                console.log("Test");
                createChart($this);
                $this.removeClass('js-chart');

            }
        });

    });

Answer 1

添加如下内容：

$('#wrapper').on("scroll", function() {
    var $wrapper = $(this);

    $('.js-chart').each( function (n) {
        var $this = $(this);
        if ( $this.position().top + $this.height() > 100 && $this.position().top < $wrapper.height() ) {
            console.log("Test");
            createChart($this);
            $this.removeClass('js-chart');
        }
    });

    if (!$('.js-chart').length) {
        $wrapper.off("scroll");
    }
});

Answer 2

我认为你可以这样做：

$('#wrapper').on("scroll", function() {

        var $wrapper = $(this);

        $('.js-chart').each( function (n) {

            var $this = $(this);

            if ( $this.position().top + $this.height() > 100 && $this.position().top < $wrapper.height() ) {
                console.log("Test");
                createChart($this);
                $this.removeClass('js-chart');

            }
        });
        if (!$(".js-chart")[0]) $wrapper.off("scroll");
    });

如何在函数完成后删除滚动事件

2 个答案: