javascript - 在 JavaScript 中的 html 元素上切换事件监听器

Question

我正在构建一个基本的永远滚动功能。当特定的 div 获得焦点或在某个偏移量内时，我希望能够通过 ajax 加载远程内容。我的这部分代码工作正常，但问题是我附加到我的事件监听器的函数多次触发。我尝试在函数本身内通过 jquery .off() 分离监听器。但这意味着我的函数只能在页面加载后起作用。但我希望能够将监听器重新附加回 div，当用户随后滚动到 div 时，该函数将再次执行。

这是我一直在做的事

$(document).ready(function() {

    $(window).on('scroll',scrollLoader);
     //attaches eventlistener
});

 var page = 10; 
function scrollLoader(){


        var hT = $('#load-more').offset().top,
            hH = $('#load-more').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
            var jsArray, reason, items = "";

        if (wS > ((hT+hH-wH)-50)){ //500


            $(window).off('scroll');
            //detaches event listener

             page =  page + 1;
            console.log("page: " +page);
            $.ajax({
                url: 'class.index.php',
                type: 'GET',
                data: "origin=index",
                success: function (data) {
                     jsArray = data;
                const arrayData = data;
                console.log(typeof(JSON.parse(arrayData)));

                Array.prototype.forEach.call(JSON.parse(arrayData), function(item, index){

                    //stuff gets done here

                });

                    $("#ajax-post").append(items);

                    //console.log(items);
                },
                cache: false
            });






        }
        //$(window).on('scroll',scrollLoader);

}

Answer 1

@Maxwell 您可以尝试去抖动您的听众。或者更好的是为此使用路口观察器。这将使您的生活更加简单。

如果您需要更多帮助，请告诉我。

这就是您对函数进行去抖动的方式。它确保函数在上一次调用后的特定时间后被调用。

const debounce = (func, delay) => { 
    let debounceTimer 
    return function() { 
        const context = this
        const args = arguments 
            clearTimeout(debounceTimer) 
                debounceTimer 
            = setTimeout(() => func.apply(context, args), delay) 
    } 
}

Intersection Observer