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


Posted in Vue.js onDecember 02, 2020

今天使用节流函数的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结。

节流函数

浏览器的一些事件,如:resize,scroll,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕。所以先贤们发明了节流函数,简单版本如下:

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)
 }
 }
}

假设有一个 vue 组件 svgMark。这个组件中渲染的元素要在页面窗口大小发生变化时重绘 reDraw ,而重绘时要使用节流函数防止性能损耗。正常情况下代码如下:

<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>

一般情况下这样用没什么问题。但是有这样一个场景,使用节流函数时却失效了,即当这个组件被 v-for 循环加载了很多次:

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

这个时候无论渲染了多少个 svgMark 组件,在窗口大小改变的时候却只触发了第一个组件和第 n 割组件的重绘,为什么其他组件没有触发呢?这就要从头说起了。

  • 节流函数

节流函数在初始化的时候产生了一个闭包,闭包内保存了变量 last ,这个 last 记录了上一次执行 f 函数的时间。而当下一次触发节流函数的时候,如果此时时间 now 减去上次时间 last 小于了我们规定的节流时间 wait ,那么函数 f 将不会执行。

很显然,第一个子组件在触发节流函数的时候产生了一个 last,而第二个组件在触发节流函数时候的时产生的 now 并没有满足 now - last > wait 的条件,所以没有执行重绘代码。而到了第 n 个组件触发节流函数的时候,满足了 now - last > wait 的条件所以重绘成功了。

  • vue 组件

vue 组件在代码编译的阶段,组件 svgMark 中的方法 reDraw: throttle(function() { this.index++ }, 500) 就已经被编译成了类似如下函数:

reDraw: ƒ (...args) {
 let now = Date.now()
 if (now - last > wait) {
 last = now
 f.apply(this, args)
 }
}

由于函数是引用类型,所有使用子组件 svgMark 的 methods 中的 reDraw 都指向了同一个内存地址,也就是说所有子组件的 reDraw 方法都是同一个函数。

因为所有组件都公用了同一个节流函数,当然就会产生节流了。那怎么解决问题呢?对症下药就要让每个组件产生自己的节流函数,而不产生共用。代码如下

子组件:

<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 组件节流函数的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
vue实现表格合并功能
Dec 01 #Vue.js
vue element实现表格合并行数据
Nov 30 #Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 #Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
You might like
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php实现删除空目录的方法
2015/03/16 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
JavaScript中的继承方式详解
2015/02/11 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
详解Python装饰器
2019/03/25 Python
Python秒算24点实现及原理详解
2019/07/29 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
理工学院学生自我鉴定
2014/02/23 职场文书
材料物理专业求职信
2014/09/01 职场文书
学术研讨会主持词
2015/07/04 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
css背景和边框标签实例详解
2021/05/21 HTML / CSS
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js