Underscore.js Debounce无法正常使用Scroll

时间:2016-09-13 16:34:51

标签: javascript jquery ajax underscore.js

我正在尝试使用_.debounce Underscore.js函数来限制发送的AJAX POST请求的数量。

我的代码应该只在用户滚动到页面底部后执行AJAX,并且我已经尝试使用_.debounce等待2秒再发送另一个请求。一旦我滚动到底部,AJAX就会正确执行,但是,如果我在到达底部后继续滚动,则在2秒钟之前发送另一个AJAX请求。

我也尝试过使用_.throttle

function ajaxFunction() {
        $.ajax({
            type: "POST",
            url: "SearchResults",
            data: { skipAmount: $('.product-box').length, search: search },
            success: function (response) {

                if (response != null && response.success) {
                    $('#productcontent').append(response.responseText);
                }

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (debug) {
                    alert(XMLHttpRequest.responseText);
                    alert(textStatus);
                    alert(errorThrown);
                }
            }
        });
    }

    function debounceAjaxFunction() { _.debounce(ajaxFunction(), 2000); }

    $(window).scroll(function () {

        if ($(window).scrollTop() + $(window).height() == $(document).height()) {

                    debounceAjaxFunction();
        }

    })

1 个答案:

答案 0 :(得分:2)

你在辩论参数

中调用了这个函数
    _.debounce(ajaxFunction(), 2000);

当你应该将它的引用作为参数传递时

    _.debounce(ajaxFunction, 2000);

然后设置一个变量以从滚动函数

调用
   var debounceAjaxFunction = _.debounce(ajaxFunction, 2000);

此处的文档仅供参考http://underscorejs.org/#debounce,相关部分为

    var lazyLayout = _.debounce(calculateLayout, 300);