防抖小demo
功能介绍:鼠标经过区域数字加1,改变时间,当前时间展示 (时间都是时间戳)
相隔一秒的时间 才会更新区域数据和 时间,当前时间每次都改变
准备:电脑 vue环境
<template>
<div
ref="container"
class="container"
>
{{ number }}
开始时间:{{starttime}}
当前时间:{{nowtime}}
</div>
</template>
<script>
export default {
data () {
return {
number: 0,
timeout: null,
starttime: 0,
nowtime: 0
}
},
mounted () {
this.getAction()
},
methods: {
getAction () {
this.$refs.container.onmousemove = () => {
this.delay()
}
},
delay () {
this.nowtime = Date.now()
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.number = this.number + 1
this.starttime = Date.now()
}, 1000)
}
}
}
</script>
<style scoped>
.container {
font-size: 50px;
color: rgb(155, 35, 35);
text-align: center;
line-height: 60px;
background-color: #22a0e9;
height: 60px;
}
</style>
PS:有错误欢迎品论指正