Question

实际上我看过一个网站，在滚动新页面的同时会自动加载，并将其附加到旧页面。

滚动时不仅页面，URL也会发生变化。

完全我不知道如何实现这一点。这是我见过的网站 matt 。这里只需向下滚动，就会有一个无限滚动条概念，并且URL地址栏也会自动更改。

Answer 1

如果你想在滚动的某个数据库中将动态内容附加到现有页面，然后在滚动时进行ajax调用，并使用限制函数对限制调用次数进行速率限制，这将返回一个受限制的ajax调用版本，即你的ajax调用只会在等待毫秒时间内最多提供一次。

var myajax = _.throttle(/*your ajax call goes here*/, wait/*time in ms*/);

_。throttle（）是 underscore.js 库的一部分，如果您不想包含此库，那么您可以使用我的版本的是的，

function myThrottle(func, wait, leading) {
  var lastCall = 0, timeout = null,

  execute = function() {
    clearTimeout(timeout);
    timeout = null;
    func();
  };

  return function() {
    var currentTime = new Date().getTime();
    if (leading && (lastCall == 0 || (currentTime - lastCall) > wait)) {
      lastCall = currentTime;
      func();
    }

    else if (!leading && !timeout)
      timeout = setTimeout(execute, wait);
  };
}

此处第三个参数前导如果 true ，则调用将在等待持续时间的前沿阻止进一步调用，否则在后沿（默认行为）。

Answer 2

您可以使用以下内容：

var documentBottom = $(document).height(), // cache document height
    page = 0; // current page number

$(document).on('scroll', function () {
    // if window scroll position bigger than document bottom minus 300px,
    // then make ajax request and append result to container
    if($(window).scrollTop() > documentBottom - 300) { 
        $.ajax({
            type: "POST",
            url: "some.php",
            data: { page: page },
            success: function (data) {
                $('.my-container').append(data); // appending result

                // cache new document height
                documentBottom = $(document).height();

                page += 1; // change page number

                //change url in address bar
                window.history.pushState({},"","/page/"+page); 
            }
        });
    }
});

OnScrolling新页面正在自动加载

2 个答案: