最近遇到一个需求,vue2.x里的debounce的延迟时间(暂记为wait)需要通过this.wait拿到
很快啊,一顿操作,有了如下代码
<template>
<div @mouseenter="onMouseEnter">123</div>
</template>
<script>
import {debounce} from 'lodash'
export default {
props:{
wait:{
type:Number,
default:0
}
},
method:{
onMouseEnter:debounce(function($event){
console.log('执行逻辑部分')
},this.wait)
}
}
</script>
结果,报错拿不到this,因为此时的this是window,window没有wait变量,应该怎么处理呢?
其实可以在执行mouseenter之前写个中间函数onMouseEnterProxy,再写个debounce函数使得它等于this.onMouseEnter,请看下面代码
<template>
<div @mouseenter="onMouseEnterProxy">123</div>
</template>
<script>
import {debounce} from 'lodash'
export default {
props:{
wait:{
type:Number,
default:0
}
},
method:{
onMouseEnterProxy($event){
//这里可以先写一些逻辑,比如debounce触发前要设置flag
const self = this
if(!this.onMouseEnter){
this.onMouseEnter=debounce(function($event){
console.log('执行逻辑部分')
},this.wait)
}
this.onMouseEnter($event, self)
},
}
}
</script>
