jquery - 窗口滚动 : avoid multiple api hits based on scroll height

Question

我正在从窗口滚动时的 api 获取数据，即当用户在页面上向下滑动 95% 时。问题是多个 api 命中被触发。

我假设这是由于 js 调用的异步性质以及每次用户向下滚动时多次调用窗口滚动造成的。

我确实放置了一个变量“taskFired”来检查并仅在尚未执行时才允许 api 命中逻辑。但当用户向下滚动时，我仍然收到 4-5 次 api 命中，而不是 1 次。我无法找出原因。

代码如下:

//用于检查我们是否已经在访问 api 或现在是否已达到 95% 的变量。默认情况下为 false。

var taskFired = false;

//滚动事件

$(window).scroll(function (evt) {
            if (!taskFired) { //allow to check and hit api if taskFired is false
                $.when(_self.scrollApiHit()).then(function () {
                    taskFired = false; //reset variable when api hit done
                });
            }                
        });

_self.scrollApiHit = function () {               
                var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
                var scrolltrigger = 0.95;    

                if ((wintop / (docheight - winheight)) > scrolltrigger) {
                    taskFired = true;
                    //API HIT
                }
            };

我什至尝试设置 setTimeout 但即使这样也不起作用:

setTimeout(function () {
                    if (!taskFired) {
                        $.when(_self.scrollApiHit()).then(function () {
                            taskFired = false;
                        });
                    }
                },1000);

Answer 1

正如 $.when 文档所述，

If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately.

您必须确保 _self.scrollApiHit 实际上返回一个 Promise，否则，taskFired 将立即设置回 false。您的函数 _self.scrollApiHit 似乎不是一个 promise 。

你能尝试这样的事情吗:

$(window).scroll(function (evt) {
        if (!taskFired) {               
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            var scrolltrigger = 0.95;    

            if ((wintop / (docheight - winheight)) > scrolltrigger) {
                taskFired = true;
                $.when($.ajax("API HIT HERE")).then(function () {
                    taskFired = false; //reset variable when api hit done
                });
            }
        }                
    });