JavaScript Closure 的第一次使用

今天在帮沈老司机调一个代码。

一开始的代码是通过写一个定时器然后通过 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 查询带来的开销。