search

aszx87410 / frontend-intermediate-course

It's a free online course about some frontend tech including Ajax, CORS, gulp, webpack and so on.
266 stars 88 forks source link

[作業] 繳交hw7 #104

Closed ckchuang-dev closed 7 years ago

ckchuang-dev commented 7 years ago

slack 帳號

dez

哪一個作業

  1. 走向國際：i18n

作業 Github 連結

https://github.com/DezChuang/frontend-intermediate-course/tree/master/answers/hw7

作業 Github Page 連結

https://dezchuang.github.io/frontend-intermediate-course/answers/hw7/index.html

其他補充說明

https://github.com/DezChuang/frontend-intermediate-course/blob/master/answers/hw7/README.md

aszx87410 commented 7 years ago

infinite scroll 那邊有一個 bug 喔，就是你很快往下捲的時候會送出多個相同 request，就重複載入同樣的 channel 了 解決方法可參考直播教學，加個 isLoading 的變數

關於你直播筆記的部分 沒錯，有些事情就是比想像中簡單很多，其實根本不需要套件，簡單的自己做就好了 然後作業的部分的確有特別安排過，所以下一次的作業才會是 webpack XD

ckchuang-dev commented 7 years ago

當初有試過isLoading的方法是沒問題的，但後來參考miau715大大的timeout方法來控制infinite scroll。

Huli大大發現的bug需切換語言可以複製出來，我試著將下面這段function原本的timer搬到global宣告為let timer = 0;可以修正，但看timer的log看不出為什麼如果不放在global會導致兩次的request

function infiniteScroll() {
  let timer;
  const reservedHeight = 100;
  const timeout = 100;
  window.addEventListener('scroll', function() {
    console.log(timer);
    if(timer) {
      window.clearTimeout(timer);
    }
    timer = window.setTimeout(function() {
      if(document.body.scrollTop + window.innerHeight > document.body.scrollHeight - reservedHeight) {
        appendData();
      }
    }, timeout);
  });
}
aszx87410 commented 7 years ago

我一時之間也看不太出來，但懷疑可能是變數作用域的問題 看 log 的話應該是看得出來一些端倪的才對 你可以把 github 上面的調整成會出錯的版本，這樣我比較好測試XD

ckchuang-dev commented 7 years ago

沒事了，仔細加多一點log後發現是我呼叫了兩次infinteScroll，所以只有在切換語言後，timer每次都加2而發出兩個request，已修正。感謝Huli大大的批改<( )>