js笔记之setTimeout和setInterval之间的区别及使用，获取元素在页面中的位置及大小、在Vue中，我们如何获取元素在页面中的距离/何实时监控鼠标滚轮滚动，离页面顶部的距离

setTimeout和setInterval之间的区别

setTimeout其实就像是一个一次性的盒子，用了就不能再用
而setInterval就是一个家里面的碗，可以重复使用

我们可以在Vue同时定义这两个定时器，来查看他们的区别

   //在methods里面声明了一个settime函数
   settime() {
      setTimeout(()=> {
        console.log('out');
      },1000)

      setInterval(() => {
        console.log(111);
      }, 1000);
    },

也可以通过嵌套的方式来使用这两个函数

    gettime() {
      console.log('要爆炸啦');
    },
    settime() {
      setTimeout(this.gettime,1000);
    },

当我们需要清楚定时器的时候，那么我们需要用到clearTimeout， clearInterval这两个函数，这时候我们需要给自己的定时器取名字

    gettime() {
      console.log('要爆炸啦');
    },
    settime() {
     let timer =  setTimeout(this.gettime,1000);
     clearInterval(timer)
    },

获取元素在页面中的位置以及大小

offsetTop
//函数 --- 返回元素相对带有定位父元素上方的偏移，就是该元素的父元素如果开启了position，那么他返回的距离就是距离该父元素的距离。 如果没有父元素没有定位或者没有父元素，那么他返回的就是 距离页面顶部的距离

offsetLeft
//和offsetTop一样，如果有父元素且有定位，那么返回距离父元素左边的距离，否则返回距离页面顶部的距离

offsetParent
//返回该元素带有定位的父元素，如果没有父元素或者父元素没有定位， 那就返回body

offsetWidth
//返回元素的普通盒模型的宽，就是带border padding等

offsetHeight
//返回元素的普通盒模型的高，就是带border padding等

那么在Vue中，我们如何获取元素在页面中的距离呢，话不多说，直接上代码

//直接来一个div，然后绑定一个ref 并且绑定点击事件
<div class="testbox" ref='box' @click="getLoca"></div>

//在script中，定义方法，当你点击的时候就能获取元素的位置了
    getLoca() {
      let box = this.$refs.box
      console.log(box.offsetTop);
      console.log(box.offsetLeft);
      console.log(box.offsetParent);
      console.log(box.offsetWidth);
    },

那么如何实时监控鼠标滚轮滚动，离页面顶部的距离呢，上代码

//定义方法
locationTop() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
 console.log("滚动距离" + scrollTop);
    }
//在mounted周期函数里面调用
  mounted() {
    window.addEventListener('scroll',this.locationTop)
  },
 //这样就可以一直打印值了,在我们做一些页面动画的时候，便可以用到了