vue组件中节流函数的失效的原因和解决方法

function throttle (f, wait = 200) {
 let last = 0
 return function (...args) {
 let now = Date.now()
 if (now - last > wait) {
  last = now
  f.apply(this, args)
 }
 }
}

<template>
 <div>{{ index }}</div>
</template>

<script>
import { throttle } from 'lodash'
export default {
 name: 'SvgMark',
 data() {
 return {
  index: 0
 }
 },
 mounted() {
 window.addEventListener('resize', this.reDraw)
 },
 beforeDestroy() {
 window.removeEventListener('resize', this.reDraw)
 },
 methods: {
 reDraw: throttle(function() {
  this.index++
 }, 500)
 }
}
</script>
</script>

<template>
 <div>
 <svgMark v-for="item in 10" :key="item.id" />
 </div>
</template>

reDraw: "htmlcode">

<template>
 <div>{{ index }}</div>
</template>

<script>
import { throttle } from 'lodash'
export default {
 name: 'SvgMark',
 data() {
 return {
  index: 0
 }
 },
 mounted() {
 this.reDraw = throttle(() => {
  this.index++
 }, 500)
 window.addEventListener('resize', this.reDraw)
 },
 beforeDestroy() {
 window.removeEventListener('resize', this.reDraw)
 }
}
</script>



我们在 mounted 声明周期函数中手动声明了 reDraw 函数替代 methods 中的 reDraw ，这样在每个组件初始化的时候都会产生一个自己的节流函数了。需要注意此时节流函数的参数使用了箭头函数，因为这样 this 才会指向组件实例。
以上就是节流函数带给我的坑，现在分享给大家。[下班][鼓掌]
以上就是vue组件中节流函数的失效和解决方法的详细内容，更多关于vue 组件节流函数的资料请关注其它相关文章！