关闭

vue里使用lodash进行防抖和节流操作

来源:网络 文章列表 2020-05-07 8
vue里使用lodash进行防抖和节流操作。节流(throttle): 创建一个节流函数,在等待时间内最多执行 一次的函数

节流(throttle): 创建一个节流函数,在等待时间内最多执行 一次的函数

防抖(debounce)函数:一个需要频繁触发的函数,在规定时间内只让最后一次生效,前面的不生效

安装

可以通过 yarn 或 npm 安装 lodash。

# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save

注意:如果我们不想导入lodash的所有内容,而只导入所需的部分,则可以通过一些Webpack构建自定义来解决问题。 还可以使用lodash.throttlelodash.debounce等软件包分别安装和导入lodash的各个部分。

使用

<template>
  <div>
   <button @click="throttleFun">点击按钮(节流)</button> <br/><br/>
   <input type="text" @keyup="debounceFun" /> <br/><br/>
  </div>
</template>
<script>
// 导入lodash 函数function段
import funHelper from 'lodash/function'

export default {
  methods: {
    // 防抖(延迟多少时间调用,如果一直keyup则会覆盖之前的时间重新计算)
    debounceFun: funHelper.debounce((e)=>{
      console.log(e.target.value);
    }, 2000),
    // 2秒内调用一次
    // throttleFun: funHelper.throttle(()=>{
    throttleFun: funHelper.throttle(function(){
      // 如果使用()=> 箭头函数 this指向根实例,使用普通函数function()不改变this指向本组件
      console.log(this); 
      console.log('2秒内只能调用一次!');
     }, 2000, { 'trailing': false }),
     //
     throttleFun2(){
       console.log('3秒内调用一次');
     },
     initFun(){
       // 定义节流函数
       let throttleF = funHelper.throttle(this.throttleFun2, 3000)
       // 循环调用
       for(let i=0;i<10;i++){
         throttleF();
       }
     }
  },
  created(){
    this.initFun();
  }
}
</script>

特别说明:

1. 在给防抖或者节流函数传递执行函数时,一定要注意this的指向问题。

2. onclick调用方法时,不能写成throttleFun(){ ...funHelper.debounce() } 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论
关闭