setTimeout和setInterval之间的区别
setTimeout其实就像是一个一次性的盒子,用了就不能再用
而setInterval就是一个家里面的碗,可以重复使用
我们可以在Vue同时定义这两个定时器,来查看他们的区别
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
offsetLeft
offsetParent
offsetWidth
offsetHeight
那么在Vue中,我们如何获取元素在页面中的距离呢,话不多说,直接上代码
//直接来一个div,然后绑定一个ref 并且绑定点击事件
<div class="testbox" ref='box' @click="getLoca"></div>
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() {
window.addEventListener('scroll',this.locationTop)
},