Question

我已经通过以下方式在我的网页上实现了延迟加载的内容：

初始加载： func1：通过ajax调用获取10个品牌的信息（也返回总预期数据）。 func2：通过ajax获取上述功能中收到的10个品牌的产品信息。

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
       if(totaldatarecvd < totalExpectedData){
         func1: Get information for next 10 brands via ajax call.
        func2: Get products information of the 10 brands recieved in above function via ajax.
       }

      }

问题：在谷歌浏览器上它运行良好，而在Mozilla Firefox上，当用户滚动屏幕70％时，正在进行多个ajax请求，因此呈现的数据顺序中断。预期：当70％的屏幕滚动时，发出一个ajax请求来获取下一个10个数据。进一步滚动获取下一个10个品牌等等。

请建议一次只能使用一个请求实现延迟加载。

Answer 1

我相信您遇到了这种行为，因为当您使用鼠标滚轮滚动页面时，您实际在做的是一次滚动页面X像素（例如，一个滚轮带20个像素） “滚动”）。但是，每次页面向下滚动1个像素时，都会触发滚动事件。因此，您在滚动事件中分配的任何功能理论上应该每轮“滚动”执行20次。

解决方案：添加一个（全局）变量，该变量将控制是否已达到所需的滚动位置（因此已启动数据加载），并使用该变量来防止多个数据加载请求。该变量最初应设置为false，一旦达到所需的滚动位置，设置为true并启动数据加载。

在数据加载完成后不要忘记将其设置为false，否则它只会在第一次使用。

dataLoading = false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7 && !dataLoading){

    dataLoading = true;

    if(totaldatarecvd < totalExpectedData){
        func1: Get information for next 10 brands via ajax call.
        func2: Get products information of the 10 brands recieved in above function via ajax.
    }

}

JS-JQuery window.scroll在Mozilla Firefox

1 个答案: