Vue-監聽事件、移除事件（節流處理）

業務：header（fixed定位）在頂部時是transparent的，當scroll觸發，添加背景色；再次移動到頂端還是transparent的。

depository：TYXX

下面這一段代碼，在元件解除安裝後destroyed會執行，但是scroll還是會繼續觸發。

created() {
  window.addEventListener("scroll", this.throttle());
},
destroyed() {
  window.removeEventListener("scroll", this.throttle());
}
// methods
throttle() {
    let lastTime = new Date();
    let timer = null;
    return () => {
      let startTime = new Date();
      let remaining = 200 - (startTime - lastTime);
      clearTimeout(timer);
      if (startTime - lastTime > 200) {
        lastTime = startTime;
        this.scroll.call(this);
      } else {
        // 最後一次也執行
        timer = setTimeout(() => {
          this.scroll.call(this);
        }, remaining);
      }
    };
  }
           

問題的原因和“data為什麼是函數”是一樣的。節流函數throttle每次傳回的函數是不一樣的，是以，remove的函數和add的函數式不一樣的。處理的方法就是對 節流 函數進行改造。（當然你也可以不節流就沒有事了）

created() {
   this.lastTime = new Date();
   this.timer = null;
   window.addEventListener("scroll", this.throttle);
},
destroyed() {
   window.removeEventListener("scroll", this.throttle);
}
// methods
throttle() {
  let startTime = new Date();
  let remaining = 200 - (startTime - this.lastTime);
  clearTimeout(this.timer);
  if (startTime - this.lastTime > 200) {
    this.lastTime = startTime;
    this.scroll.call(this);
  } else {
    // 最後一次也執行
    this.timer = setTimeout(() => {
      this.scroll.call(this);
    }, remaining);
  }
}
           

效果：Perfect