踩坑记录:vue使用debounce函数
正确写法:<template><h-page-container><el-button @click="handleClick()">点我</el-button></h-page-container></template><script>import { debounce } from './common.js'e
·
正确写法:
<template>
<h-page-container>
<el-button @click="handleClick()">点我</el-button>
</h-page-container>
</template>
<script>
import { debounce } from './common.js'
export default {
name: 'Hello',
data () {
return {
}
},
methods: {
handleClick: debounce(function () { // 问题一:handleClick: debounce的写法有什么用?
this.clg()
}, 200),
clg () {
console.log('111111')
}
}
}
</script>
debounce是已经准备好的:
/**
* 函数防抖
*/
export function debounce (fn, delay) {
// 记录上一次的延时器
let timer = null
var delay = delay || 200
return function () {
const args = arguments
const that = this
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
问题一:handleClick: debounce的写法有什么用?
handleClick: debounce相当于:
<template>
<h-page-container>
<el-button @click="handleClick()">点我</el-button>
</h-page-container>
</template>
<script>
import { debounce } from './common.js'
export default {
name: 'Hello',
data () {
return {
test: debounce(function () {
this.clg()
}, 200)
}
},
methods: {
handleClick () {
this.test()
},
clg () {
console.log('111111')
}
}
}
</script>
但是当我改写成下面这种写法时,clg在被我点击时就直接触发了(点击了多少次就会延迟200ms后再执行多少次clg),并没有实现节流的效果,我猜想是加了一个()导致他的返回值立刻执行了。但是为什么写成this.test()就不会被立刻执行呢?
handleClick () {
const that = this
debounce(function () {
that.clg()
}, 200)()
},
是因为上面两种写法debounce其实只在页面渲染的时候执行了一次。但是最后一种写法他每次点击都会被执行,加入事件队列,然后再delay之后依次执行。
最最最简单就是自个在页面里写防抖,看半天他那封装原理没卵用,不如去花时间看看别的。
<template>
<h-page-container>
<el-button @click="handleClick()">点我</el-button>
</h-page-container>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
timer: null
}
},
methods: {
handleClick () {
clearTimeout(this.timer)
this.timer = setTimeout(function () {
console.log('111111')
}, 200)
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)