用rest_api在单页无限加载文章的方法

---

jQuery(document).ready(($) => {
  //在单页执行无限加载的写法 
  var rest_url = custom_rest_api.rest_url;

  function scroll_post() {
    //.last() 获取DOM中最后一个值 最后一个dom 。 也就是你有多个按钮的话获取的永远是最后一个 
    var btn_load_post = $(".previous_post_link").last();
    //.offset().top is the position of this link  offset() 设置相对于文档顶部的偏移坐标 返回 top和left的值
    //outerHeight track the current height of the window  返回第一个匹配元素的外部高度 $(window).outerHieght() 返回文档的高度 这里就是窗口的高度，不带margin 
    //var scrollPosition = btn_load_post.offset().top - $(window).outerHeight();
    //$(window).scrollTop() 是 滑动到当前位置的高度。 scrollTop获取选定元素的垂直偏移高度 这里是$(window)的垂直偏移高度

    console.log($(window).outerHeight());
    console.log(btn_load_post.offset().top);
    var scrollPosition = btn_load_post.offset().top - $(window).outerHeight();
    console.log(scrollPosition);

    $(window).on('scroll',(e) => {

      if (scrollPosition > $(window).scrollTop()) {
        //当元素实际高度减去当前窗口实际高度 大于 窗口滚动到达的高度  when the scrolling is greater than the position 
        //当到达上面的高度时候就可以执行函数 
        return;
      } else {
        $(this).off(e);
        call_the_post();
        console.log("Yes");
      }
      
    })
    
    //outerHeight interact the height of the current window  返回第一个元素的外部高度
    //offset() 方法设置或返回被选元素相对于文档的偏移坐标。
    //$(window).scrollTop()
     
  }

  scroll_post();
  function call_the_post() {

    var previous_post_id = $('.previous_post_link').last().attr('data-previous-id');
    var json_url = rest_url + '/' + previous_post_id + '?&_embed=true';
    $.ajax({
      dataType:'json',
      url:json_url,
      success:(response) => {
        console.log(response);
        display_post(response);
      }

    });

    function display_post(response) {
      //用$().append() 来挂在article的文章模板就好，  文章模板用`` template string 加上 ${response.title} 这种获得的属性就好 
      //在执行加载文章的函数之后 再执行 scroll_post(); 来重置 执行一次的 call_the_post(); 函数 
      scroll_post();
    }

  }
  
});

---