Closed ckchuang-dev closed 7 years ago
infinite scroll 那邊有一個 bug 喔,就是你很快往下捲的時候會送出多個相同 request,就重複載入同樣的 channel 了 解決方法可參考直播教學,加個 isLoading 的變數
關於你直播筆記的部分 沒錯,有些事情就是比想像中簡單很多,其實根本不需要套件,簡單的自己做就好了 然後作業的部分的確有特別安排過,所以下一次的作業才會是 webpack XD
當初有試過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);
});
}
我一時之間也看不太出來,但懷疑可能是變數作用域的問題 看 log 的話應該是看得出來一些端倪的才對 你可以把 github 上面的調整成會出錯的版本,這樣我比較好測試XD
沒事了,仔細加多一點log後發現是我呼叫了兩次infinteScroll,所以只有在切換語言後,timer每次都加2而發出兩個request,已修正。感謝Huli大大的批改<( )>
slack 帳號
dez
哪一個作業
作業 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