vue中使用setInterval，移入暫停，移出繼續

首先提出一點！

在vue中使用 setInterval(),切記需要將其綁定到window上面，不然的話，你是沒有辦法進行控制其關閉與否的

講一個我自己在工作中遇到的需求吧先：右側模塊中。自動進行滾動，滾動到底之后，返回頂部繼續滾動，並且鼠標移入暫停，移出繼續滾動

當看到這個需求的時候，我第一個想法是通過swiper來進行實現，因為swiper確實有比較全面的方法來實現，只是相對來說有些麻煩了（相對於JS的方法實現）

先貼一張圖片吧：

 

對與上圖的紅色框框，我使用了overflow-y：scroll;    class::-webkit-scrollbar{display:none}  來實現的無滾動條可滾動區域

因為是vue項目，所以我給紅色框框加了一個ref，---->        <div ref="jiangxi"></div>

在data中聲明了一個變量 ： ---->   dsJX:""    (命名用了簡寫   "定時江西" == dsJX )   聲明另一個變量 ： ---->  jxNum:0 ,（用於記錄滾動位置，為暫停之后再繼續的時候使用）

然后寫了一個方法，代碼如下，將這個方法放到mounted中，即可進入頁面便進行滾動

 // 江西定時器
    dsJiangXi() {
      let that = this;
      let num = 0;
      that.dsJX = window.setInterval(() => {
        if (num < that.$refs.jiangxi.scrollHeight) {
          num = Math.floor(parseInt(num) + 1);
          that.$refs.jiangxi.scrollTop = num;
          if (num > 400) {
            that.$refs.jiangxi.scrollTop = 0;
            num = 0;
          }
　　　　　　that.jxNum = num
        }
      }, 50);
    },

 

在上面的方法中，let that = this  是因為 setInterval 和 setTimeout中對沒有聲明的this指向是不明確的，會報錯，找不到對應的屬性或方法

let num = 0 : ----------------->聲明一個變量

用在data中聲明的變量dsJX來接收 定時器，方便之后的操作(暫停)

that.$refs.jiangxi.scrollHeight  : ----------------------> 獲取當前dom元素的高度      jiangxi : 在div中定義的ref

Math.floor()返回小於或等於一個給定數字的最大整數。可以理解為：向下取整

條件是如果num小於元素的高度，那么就給num+1，並且設置一個最高值，如果num大於400，那么就還原num的高度、dom元素的高度

that.jxNum = num ,將當前的num的值存入到jxNum中

 

下面就是一個暫停的方法了，這個方法非常簡單：

// 移入江西
    yiRuJX() {
      clearInterval(this.dsJX);
    },

clearInterval(),關閉定時器的方法  this.dsJX 是我們在之前聲明的，接收了一個定時器

 

暫停之后再繼續的話，簡單理解就是移入的時候，記錄下來一個位置，移出的時候，在繼續從這個位置開始滾動，我們在之前的定時器方法中，已經接收了一個jxNum

有了這個jxNum,剩下的就簡單了，我們只需要再寫一個定時器的方法即可，如下：

// 移出江西
    yiChuJX() {
      let that = this;
      that.dsJX = window.setInterval(() => {
        if (that.jxNum < that.$refs.jiangxi.scrollHeight) {
          that.jxNum = Math.floor(parseInt(that.jxNum) + 1);
          that.$refs.jiangxi.scrollTop = that.jxNum;
          if (that.jxNum > 400) {
            that.$refs.jiangxi.scrollTop = 0;
            that.jxNum = 0;
          }
        }
      }, 50);
    },

可以看出，跟第一個定時器的方法只有一點區別，那就是num不在聲明，直接使用了data中的jxNum

至此，一個可以循環滾動，移入暫停、移出繼續滾動的功能就做完了