浅析VUE防抖与节流


Posted in Vue.js onNovember 24, 2020

防抖和节流到底是啥

函数防抖(debounce)

解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。

案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数。

function debounce(fn, wait) {
 let timeout = null
 return function() {
 if(timeout !== null) clearTimeout(timeout)  
 timeout = setTimeout(fn, wait);
 }
}
function handle() { 
 console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

addEventListener的第二个参数实际上是debounce函数里return回的方法,let timeout = null 这行代码只在addEventListener的时候执行了一次 触发事件的时候不会执行,那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时器,当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行,这是debounce函数的原理

函数节流(throttle)

解释:当持续触发事件时,有规律的每隔一个时间间隔执行一次事件处理函数。

案例:持续触发scroll事件时,并不立即执行handle函数,每隔1000毫秒才会执行一次handle函数。

function throttle(fn, delay) { 
 var prev = Date.now()   
 return function() {    
 var now = Date.now()    
 if (now - prev > delay) {     
  fn()    
  prev = Date.now()    
 }   
 }  
}  
function handle() {   
 console.log(Math.random())  
}
window.addEventListener('scroll', throttle(handle, 1000))

原理和防抖类似,每次执行fn函数都会更新prev用来记录本次执行的时间,下一次事件触发时判断时间间隔是否到达预先的设定,重复上述操作。

防抖和节流都可以用于 mousemove、scroll、resize、input等事件,他们的区别在于防抖只会在连续的事件周期结束时执行一次,而节流会在事件周期内按间隔时间有规律的执行多次。

浅析VUE防抖与节流

Vue中实践

在vue中实现防抖无非下面这两种方法

  • 封装utils工具
  • 封装组件

封装utils工具

把上面的案例改造一下就能封装一个简单的utils工具

utils.js

let timeout = null
function debounce(fn, wait) {
 if(timeout !== null) clearTimeout(timeout)
 timeout = setTimeout(fn, wait)
}
export default debounce

app.js

<input type="text" @input="debounceInput($event)">

import debounce from './utils'
export default {
 methods: {
 debounceInput(E){
  debounce(() => {
  console.log(E.target.value)
  }, 1000)
 }
 }
}

封装组件

至于组件的封装我们要用到$listeners、$attrs这两个属性,他俩都是vue2.4新增的内容,官网的介绍比较晦涩,我们来看他俩到底是干啥的:

$listeners: 父组件在绑定子组件的时候会在子组件上绑定很多属性,然后在子组件里通过props注册使用,那么没有被props注册的就会放在$listeners里,当然不包括class和style,并且可以通过 v-bind=”$attrs” 传入子组件的内部组件。

$listeners: 父组件在子组件上绑定的不含.native修饰器的事件会放在$listeners里,它可以通过 v-on=”$listeners” 传入内部组件。

简单来说$listeners、$attrs他俩是做属性和事件的承接,这在对组件做二次封装的时候非常有用。

我们以element-ui的el-input组件为例封装一个带防抖的debounce-input组件

debounce-input.vue

<template>
 <input v-bind="$attrs" @input="debounceInput"/>
</template>
<script>
export default {
 data() {
 return {
  timeout: null
 }
 },
 methods: {
 debounceInput(value){
  if(this.timeout !== null) clearTimeout(this.timeout)  
  this.timeout = setTimeout(() => {
  this.$emit('input', value)
  }, 1000)
 }
 }
}
</script>

app.vue

<template>
 <debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input>
</template>
<script>
import debounceInput from './debounce-input'
export default {
 methods: {
 inputEve(value){
  console.log(value)
 }
 },
 components: {
 debounceInput
 }
}
</script>

上面组件的封装用了$attrs,虽然不需要开发者关注属性的传递,但是在使用上还是不方便的,因为把input封装在了内部这样对样式的限定也比较局限。有接触过react高阶组件的同学可能有了解,react高阶组件本质上是一个函数通过包裹被传入的React组件,经过一系列处理,最终返回一个相对增强的React组件。那么在vue中可以借鉴这种思路吗,我们来了解一下vue的函数式组件。

函数式组件

什么是函数式组件?

函数式组件是指用一个Function来渲染一个vue组件,这个组件只接受一些 prop,我们可以将这类组件标记为 functional,这意味着它无状态 (没有响应式数据),也没有实例 (没有this上下文)。

一个函数式组件大概向下面这样:

export default () => {
  functional: true, 
  props: { 
    // Props 是可选的
  },
  // 为了弥补缺少的实例, 提供第二个参数作为上下文
  render: function (createElement, context) {
    return vNode
  }
}

注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的特性都会被自动隐式解析为 prop。但是你一旦注册了 prop 那么只有被注册的 prop 会出现在 context.prop 里。

render函数的第二个参数context用来代替上下文this他是一个包含如下字段的对象:

  • props:提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 一个函数,返回了包含所有插槽的对象
  • scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
  • data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
  • parent:对父组件的引用
  • listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
  • injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。

vm.$slots API 里面是什么

slots用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。

slots() 和 children 对比

你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗?在一些场景中,是这样——但如果是如下的带有子节点的函数式组件呢?

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

对于这个组件,children 会给你两个段落标签,而 slots().default 只会传递第二个匿名段落标签,slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots(),因此你可以选择让组件感知某个插槽机制,还是简单地通过传递 children,移交给其它组件去处理。

一个函数式组件的使用场景

假设有一个a组件,引入了 a1,a2,a3 三个组件,a组件的父组件给a组件传入了一个type属性根据type的值a组件来决定显示 a1,a2,a3 中的那个组件。这样的场景a组件用函数式组件是非常方便的。那么为什么要用函数式组件呢?一句话:渲染开销低,因为函数式组件只是函数。

用函数式组件的方式来实现防抖

因为业务关系该防抖组件的封装同时支持 input、button、el-input、el-button 的使用,如果是input类组件对input事件做防抖处理,如果是button类组件对click事件做防抖处理。

const debounce = (fun, delay = 500, before) => {
  let timer = null
  return (params) => {
    timer && window.clearTimeout(timer)
    before && before(params)
    timer = window.setTimeout(() => {
      // click事件fun是Function input事件fun是Array
      if (!Array.isArray(fun)) {
        fun = [fun]
      }
      for (let i in fun) {
        fun[i](params)
      }
      timer = null
    }, parseInt(delay))
  }
}
export default {
  name: 'Debounce',
  functional: true, // 静态组件 当不声明functional时该组件同样拥有上下文以及生命周期函数
  render(createElement, context) {
    const before = context.props.before
    const time = context.props.time
    const vnodeList = context.slots().default
    if (vnodeList === undefined){
      console.warn('<debounce> 组件必须要有子元素')
      return null
    }
    const vnode = vnodeList[0] || null // 获取子元素虚拟dom
    if (vnode.tag === 'input') {
      const defaultFun = vnode.data.on.input
      const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
      vnode.data.on.input = debounceFun
    } else if (vnode.tag === 'button') {
      const defaultFun = vnode.data.on.click
      const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
      vnode.data.on.click = debounceFun
    } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') {
      const defaultFun = vnode.componentOptions.listeners.input
      const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
      vnode.componentOptions.listeners.input = debounceFun
    } else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') {
      const defaultFun = vnode.componentOptions.listeners.click
      const debounceFun = debounce(defaultFun, time, before) // 获取节流函数
      vnode.componentOptions.listeners.click = debounceFun
    } else {
      console.warn('<debounce> 组件内只能出现下面组件的任意一个且唯一 el-button、el-input、button、input')
      return vnode
    }
    return vnode
  }
}

原理也很简单就是在vNode中拦截on下面的click、input事件做防抖处理,这样在使用上就非常简单了。

自定义指令 directive

我们来思考一个问题,函数式组件封装防抖的关节是获取vNode,那么我们通过自定义指令同样可以拿到vNode,甚至还可以得到原生的Dom,这样用自定义指令来处理会更加方便。。。。。。

自定义指令:https://cn.vuejs.org/v2/guide/custom-directive.html

main.js

Vue.directive("dinput", {
 bind: function(el, binding, vnode) {
  let timeout = null;
  el.addEventListener("input", function() {
   if (timeout !== null) clearTimeout(timeout);
   timeout = setTimeout(function() {
    vnode.context[binding.expression]();
   }, 1000);
  });
 }
});

vue

<input type="text" v-dinput="myfunc"/>

js

export default {
 name: "App",
 data: function() {
  return {
   loginuser: null
  };
 },
 methods: {
  myfunc() {
   console.info("myfunc");
  }
 }
}

这种方式的缺点

调用方法时无法传参

以上就是浅析VUE防抖与节流的详细内容,更多关于VUE 防抖与节流的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
You might like
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
js最简单的拖拽效果实现代码
2010/09/24 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
JS中Location使用详解
2015/05/12 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
如何选择使用结构还是类
2014/05/30 面试题
生产管理的三大手法
2013/11/11 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
党校学习思想汇报
2014/01/06 职场文书
2014年班组长工作总结
2014/11/20 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL