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

至此，一个可以循环滚动，移入暂停、移出继续滚动的功能就做完了