1

尝试按照本教程在轨道中创建带有刺激的无限滚动。这是我的观点：

<div data-controller="feed" data-action="scroll@window->feed#scroll" >
  <div data-feed-target="entries">
    <%= render(partial: "feed_posts")%>
  </div>
  <div data-feed-target="pagination"  hidden>
    <%== pagy_nav(@pagy)%>
  </div>
</div>

我的导轨控制器：

  def feed 
    @new_post = Post.new
    @pagy, @posts = pagy(Post.where(user_id: current_user.all_following.pluck(:id)).or(Post.where(user_id: current_user.id)).order(created_at: :DESC), items: 5)
    respond_to do |format|
      format.html
      format.json{
        render json:{entries: render_to_string(partial: "feed_posts", formats: [:html]), pagination: view_context.pagy_nav(@pagy)}
      }
    end
  end

最后是我的 js 控制器：

export default class extends Controller {
    static targets = ["entries","pagination"]
    scroll(){
        let next_page = this.paginationTarget.querySelector("a[rel ='next']")
        if(next_page == null ){ return }
        let url = next_page.href
        var body = document.body,
            html = document.documentElement        
        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
        if(window.pageYOffset >= height - window.innerHeight - 100){

            console.log("loading")
            this.loadMore(url)
        }
    }
    loadMore(url){
        Rails.ajax({
            type: 'Get',
            url: url,
            dataType: 'json',
            success: (data) => {
                console.log(data)
                this.entriesTarget.insertAdjacentHTML('beforeend', data.entries);
                this.paginationTarget.innerHTML = data.pagination
            } 
        })
    }
}`

负责查明是否点击页面底部的代码每次运行的次数不同，并且会向视图中添加太多结果。

我怎样才能让它有希望地运行一次，或者让它检查是否添加了 html，之前是否添加过......或者这可能不是一个好主意。

4

2 回答 2

1

用于此的技术称为Throttle：保证函数定期执行，仅每 X 毫秒执行一次。

查看有关CSS-TRICKS 的详细信息 - 通过示例解释去抖动和节流

使用带刺激的油门的简单方法是使用lodash_throttle中的函数

_.throttle(func, [wait=0], [options={}])

查看Stimulus中的Debounce和节流的用例，控制器内的 _.throttle

于 2021-02-01T06:26:08.380 回答
0

您正在使用的教程的源代码 GoRails 有一个名为Throttling Infinite Scroll Events in Javascript的后续章节。如果您不是该站点的 Pro 会员，您将无法观看视频，但在 GitHub 上有一个指向源代码的链接，该链接是免费提供的。它提供了以下更新infinite_scroll_container.js：

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["entries", "pagination"]

  scroll() {
    let next_page = this.paginationTarget.querySelector("a[rel='next']")
    if (next_page == null) { return }

    let url = next_page.href

    var body = document.body,
      html = document.documentElement

    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)

    if (window.pageYOffset >= height - window.innerHeight) {
      this.loadMore(url)
    }
  }

  loadMore(url) {
    if (this.loading) { return }
    this.loading = true

    Rails.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: (data) => {
        this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
        this.paginationTarget.innerHTML = data.pagination
        this.loading = false
      }
    })
  }
}
于 2021-02-05T00:27:18.850 回答