今天在幫沈老司機調一個程式碼。

一開始的程式碼是通過寫一個定時器然後通過 document.getElementById('')來獲取 div 的高度，然後設定了一個計時器來動態更新高度的。

開始大概是這個樣子的

setInterval(() => {
  let x = document.getElementById("code-mirror-editor");
  // 事實證明，scrollIntoView 很難用，非常難用
  // 這裡還有個 bug，就是使用滑鼠和使用觸控板的行為還不一致，使用觸控板的時候不會 scroll
  document.getElementById('code-mirror-editor').scrollIntoView(false);
}, 1000)
 

然後想了一個寫法，我們動態計算高度

setInterval(() => {
	let x = document.getElementById("code-mirror-editor");
  x.scrollTo(0, x.scrollHeight);
}, 1000)

ok，我們使用 scrollTo 的實現了需求。然後，眾所周知，dom 的查詢是非常損耗效能的，於是，閉包版本的來了。這也是我人生中第一次用閉包。哈哈哈哈哈

let x = document.getElementById("code-mirror-editor");
setInterval(() => {
  (function(_x) {
    _x.scrollTo(0, _x.scrollHeight);
  })(x)
}, 1000)
 

這裡我理解的大概是這樣，我們定義的 x 變數，由於在閉包環境下，不會被 js 的垃圾回收器回收，x 就一直保持了對 原來的 document.getElementById("code-mirror-editor"); 的引用，然後我們在 function 裡面就能一直拿到document.getElementById("code-mirror-editor");,所以，多用了一些記憶體，大大減少了DOM 查詢帶來的開銷。