jquery - 创建自定义jquery不定式婴儿车，发送请求后如何打开和关闭滚动？

Question

我希望能够在$(document).on('scroll', function() {...});使用关闭时打开$(document).off('scroll');

到目前为止，我的代码尝试使用 debounce 功能，但我得到了

非法调用

function scroller(lang, type, genre, sort, page) {
    console.log($(this).scrollTop() * 2, $('#pages').position().top);
    if ($(this).scrollTop() * 2 >= $('#pages').position().top) {
        $.post('<?= (new UrlLibry)->SetUrl('bookshop', 'jajax', 'page'); ?>', {lang: lang, type: type, genre: genre, sort: sort, pages: page}, function(data) {
            $('#loadmore').append(data);
            page++;
            $('#pageNumber').data('page', page);
        });
    }
}

var debouncedMouseMove = debounce(scroller, 50);
$(document).on('scroll', debouncedMouseMove);

标签： jqueryinfinite-scroll

Answer 1

您可以将处理函数与.on()调用分离。

此外，如果你用 debounce 函数替换所有内容，你需要继续考虑该函数必须只有一个参数：event。

我使用了 underscorejs 库中包含的debounce函数。

function scroller(event) {
  console.log('called...');
  return;

    var lang, type, genre, sort, page; // cannot pass as argument
    console.log($(this).scrollTop() * 2, $('#pages').position().top);
    if ($(this).scrollTop() * 2 >= $('#pages').position().top) {
        $.post("<?= (new UrlLibry)->SetUrl('bookshop', 'jajax', 'page'); ?>",
                {lang: lang, type: type, genre: genre, sort: sort, pages: page}, function(data) {
            $('#loadmore').append(data);
            page++;
            $('#pageNumber').data('page', page);
        });
    }
}

var debouncedMouseMove = _.debounce(scroller, 50);
$(document).on('scroll', debouncedMouseMove);

body {
    height: 400vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>