vue中实现防抖和节流(操作场景input输入框和页面滚动)
【代码】vue中实现防抖和节流。
·
防抖和节流:
共同点:都用到了setTimeout定时器,都是在指定时间间隔后执行函数,都是为了解决数据时时变化而时时请求导致性能差的问题
区别:防抖在指定时间间隔里再次调用函数,会清除定时器,重新计时,直到在最新的计时时间间隔里没有调用函数,才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数,不会清除定时器而重新计时
防抖缺点:当用户在指定时间间隔里一直操作,那么setTimeout里的函数永远不会执行
节流缺点:如果用户一直操作,那么setimeout里的函数会在指定时间间隔后都会执行一次,如此反复
防抖
<!-- 防抖 -->
<template>
<div class="layout">
<el-input v-model="value" @input="changeValue" class="w200"></el-input>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
// 判断是否还在继续输入
timer: null
}
},
methods: {
changeValue () {
// 如果timer不为空就表明在持续输入,每次改变都清除定时,这样就可以实现只输入最后一次结果(注意每次间隔如果超过500毫秒就会输出)
if (this.timer !== null) clearTimeout(this.timer)
this.timer = setTimeout(() => {
console.log(this.value)
}, 500)
}
}
}
</script>
<style lang="less" scoped>
.layout {
float: right;
.w200 {
width: 200px;
}
}
</style>
前后差异图
节流
<!-- 节流 -->
<template>
<div class="layout">
<div class="main"></div>
</div>
</template>
<script>
export default {
data () {
return {
flag: true
}
},
methods: {
// 节流
scroll () {
if (this.flag) {
setTimeout(() => {
// 500毫秒后在执行
console.log('滚起来了')
this.flag = true
}, 500)
}
this.flag = false
}
},
mounted () {
// 监听滚动事件
window.addEventListener('scroll', this.scroll)
}
}
</script>
<style lang="less" scoped>
.layout {
height: 100vh;
.main {
height: 150vh;
border: 1px solid red;
}
}
</style>
前后差异图
更多推荐
已为社区贡献7条内容
所有评论(0)