在做手機端滾動載入更多時,因為滾動是一個持續過程,所以就導致了會一次或很短時間內觸發多次ajax請求,  可以設定一個全域性變數控制.

// bool變數, 用於阻止滾動到底部連續觸發多次

  let isBottom = true

const scrollHeight = element.currentTarget.scrollHeight
const scrollTop = element.currentTarget.scrollTop
// height - top - 容器高度
const scrollLength = scrollHeight - scrollTop
const liBottom = scrollLength - newsContainer
if (liBottom > 100 && liBottom < 180) {
  if (isBottom === true) {
    isBottom = false
    // $(ajax)
  }
}
 

然後取消false,百度很多都是設定延遲1秒種取消,我是用的滾動條高度

if (liBottom > 1000) {
      isBottom = true
    }

  // 視訊模板
  const vTemple = (url, title, image, visit, catName) => {
    const res = `<li class="articles-list-normal">
    <div class="article-info-img">
    <h3 class="article-title"><a href="${url}">${title}</a></h3>
    </div>
    <div class='article-img-big'>
    <a href="${url}"><img src="${image}" /></a>
    </div>
    <div class="img-bg">
    <a href="${url}"></a>
    </div>
    <div class="video-click">
      <a href="${url}">
        <img src="/client/images/mobile/icons/play1.png" />
      </a>
    </div>
    <div class="time">閱讀量：${visit}    ${catName}</div>
    </li>`
    return res
  }
  // 無內容
  const noTemple = () => {
    const res = '<li class="article-end">再怎麼拉都沒有啦，不如看看其他版塊內容吧！</li>'
    return res
  }
  // 分頁
  let currentPage = 1
  // 分類id
  let categoryId = 0
  // 使用者id
  let userId = 0
  // bool變數, 用於阻止滾動到底部連續觸發多次
  let isBottom = true
  const windowHeight = $(window).height()
  // 列表容器高度
  const newsContainer = windowHeight - 120
  // 設定容器高度
  $('.mobile-main .m-news-list-tit').css('height', `${newsContainer}px`)
  // 滾動監聽
  $('.mobile-main .m-news-list-tit').on('scroll', (element) => {
    const scrollHeight = element.currentTarget.scrollHeight
    const scrollTop = element.currentTarget.scrollTop
    // height - top - 容器高度
    const scrollLength = scrollHeight - scrollTop
    const liBottom = scrollLength - newsContainer
    if (liBottom > 100 && liBottom < 250) {
      if (isBottom === true) {
        // isBottom 為false 防止連續下拉載入多次
        isBottom = false
        categoryId = $(element.currentTarget).find('#categoryId').val()
        userId = $(element.currentTarget).find('#userId').val()
        const nextPage = currentPage + 1
        const ajaxOptions = {
          method: 'POST',
          data: {
            id: categoryId,
            user_id: userId,
            page: nextPage
          }
        }
        let articleList = ''
        $.ajax('xxxxxx', ajaxOptions).done((data) => {
          const articles = data.articles
          articles.forEach((article) => {
            let url = article.url
            if (article.url === '') {
              url = `/articles/${article.id}`
            }
            const title = article.title
            let image = article.image 
            const visit = article.visit
            const catName = article.name
            articleList = vTemple(url, title, image, visit, catName)
            $(element.currentTarget).find('.articles-list-summary').append(articleList)
          })
          if (articles.length > 0 && articles.length < 19) {
            articleList = noTemple()
            $(element.currentTarget).find('.articles-list-summary').append(articleList)
          }
        }).fail(() => {
          // no data
        })
        // 下一頁
        currentPage = nextPage
      }
    }
    // 當滾動條高度變化後讓isBottom為true
    if (liBottom > 1000) {
      isBottom = true
    }
  })