最近遇到一个需求,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>