vue项目使用lodash节流防抖函数问题与解决

这篇具有很好参考价值的文章主要介绍了vue项目使用lodash节流防抖函数问题与解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

在lodash函数工具库中,防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。

防抖函数_.debounce(func, [wait=0], [options=])

创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。

参数

  • func (Function): 要防抖动的函数。
  • [wait=0] (number): 需要延迟的毫秒数。
  • [options=] (Object): 选项对象。
  • [options.leading=false] (boolean): 指定在延迟开始前调用。
  • [options.maxWait] (number): 设置 func 允许被延迟的最大值。
  • [options.trailing=true] (boolean): 指定在延迟结束后调用。

返回

  • (Function): 返回 debounced(防抖动)函数。

节流函数_.throttle(func, [wait=0], [options=])

创建一个节流函数,在 wait 毫秒内最多执行 func 一次的函数。

参数

  • func (Function): 要节流的函数。
  • [wait=0] (number): 需要节流的毫秒。
  • [options=] (Object): 选项对象。
  • [options.leading=true] (boolean): 指定调用在节流开始前。
  • [options.trailing=true] (boolean): 指定调用在节流结束后。

返回

(Function): 返回 throttled(节流)的函数。

在vue中使用防抖节流函数的问题

踩坑1

防抖节流函数实际上起到一个“稀释”的作用,在vue项目中我们可能会这样写(节流为例)。

<template>
    <div>
        <button @click="add_throttle">加1</button>
        <h1>{{ number }}</h1>
    </div>
</template>

<script>
import { throttle } from 'lodash';
export default {
    data() {
        return {
            number: 1
        };
    },
    methods: {
        // add函数做节流处理
        add_throttle: throttle(this.add, 1000),
        add() {
            this.number++;
        }
    },
};
</script>

然后我们信心满满地F12打开控制台……

vue项目使用lodash节流防抖函数问题与解决

上面说add 这玩意儿 undefined了。

这其实是this的指向问题。实际上这里的this并不是vue实例(至于是什么,往下看你就知道了[doge]),所以自然不存在add()方法了。

踩坑2

既然直接使用this.add() 不成,那我们换个思路,把this.add()放在函数里呢?

methods: {
    // 做节流处理
    add_throttle: throttle(() => {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

然后,自信满满地再次打开控制台……

第一眼,诶,没报错,于是点击按钮……

vue项目使用lodash节流防抖函数问题与解决

梅开二度……

其实还是this的指向问题。我们知道箭头函数是没有this的,所以这里的this相当于踩坑1里的this ,让我们打印下,揭开它的庐山真面目。

methods: {
    // 做节流处理
    add_throttle: throttle(() => {
        console.log(this);
    }, 1000),
    add() {
        this.number++;
    }
}

vue项目使用lodash节流防抖函数问题与解决

好家伙,原来这里的this本身就是undefined

解决

既然是this的指向问题,那么只要保证this指向vue实例就行了,箭头函数换成声明式函数。

methods: {
    // 做节流处理
    add_throttle: throttle(function () {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

vue项目使用lodash节流防抖函数问题与解决

结果很nice。

至于为什么,大概是lodash的_.debounce函数对this做了一些处理(_.throttle函数本质还是调用了_.debounce函数),有兴趣的小伙伴儿可以看看_.debounce的源码。文章来源地址https://www.toymoban.com/news/detail-710507.html

到了这里,关于vue项目使用lodash节流防抖函数问题与解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手写一个防抖节流函数及其使用场景

      防抖和节流是性能优化手段 什么是防抖? 防抖:单位时间内,频繁触发事件,只执行最后一次。 防抖的主要应用场景: 搜索框搜索输入。只需用户最后一次输入完,再发送请求 手机号、邮箱验证输入检测 什么是节流? 节流:单位时间内,频繁触发事件,只执行一次。

    2024年02月09日
    浏览(42)
  • 前端解决按钮重复提交数据问题(节流和防抖)

    🍿*★,°*:.☆( ̄▽ ̄)/$:*.°★* 🍿 🍟欢迎来到前端初见的博文,本文主要讲解在工作解决按钮重复提交数据问题(节流和防抖) 👨‍🔧 个人主页 : 前端初见 🥞喜欢的朋友可以关注一下,下次更新不迷路🥞 当我们在页面进行点点点的操作时,很可能遇到点击两次的行为,

    2024年02月09日
    浏览(72)
  • 微信小程序——swiper抖动问题解决以及节流、防抖

    目录 一、引出 二、防抖函数 1.为什么需要防止抖动的原因 2.函数防止抖动的原理 3.防抖动代码函数实现 4.在小程序当中使用的防抖函数 三、节流函数 1.为什么需要节流的原因 2.函数节流的原理 3.节流函数代码的实现 四、区别与使用的场景 1.什么时候会用到节流函数和防抖函

    2024年02月04日
    浏览(88)
  • Vue 3 中的极致防抖/节流(含常见方式防抖/节流)

    各位朋友你们好呀。今天是立春,明天就是正月十五元宵节了,这种立春 + 元宵相隔的时候,可是很难遇到的,百年中就只有几次。在这提前祝大家元宵快乐。 今天给大家带来的是 Vue 3 中的极致防抖/节流(含常见方式防抖/节流) 这篇文章,文章中不仅会讲述原来使用的防

    2024年02月01日
    浏览(45)
  • 微信小程序:函数节流与函数防抖

    目录 问题引入: 定义 解决方案:函数节流 一、案例举例 1.页面展示 2.search.wxml标签展示  3.search.js展示 4.结果展示  二、函数节流解决问题 1.函数 2.实例应用 三、函数防抖解决问题 1.函数 2.原理 3.应用场景 4.应用实例 总结 在搜索框中,程序短时间内大量触发某函数而导致

    2024年02月12日
    浏览(39)
  • 微信小程序全局封装防抖节流函数

    什么是防抖节流? 防抖:  简单来说就是指触发事件后在  n  秒内函数只能执行一次(输入框搜索自动补全事件、频繁点赞和取消点赞、提交事件等等) 节流:  简单来说就是指连续触发事件但是在  n  秒中只执行一次函数(发送验证码、表单验证、鼠标移动事件等等)

    2024年01月25日
    浏览(45)
  • 记录--闭包,沙箱,防抖节流,函数柯里化,数据劫持......

    函数定义阶段 在堆内存中开辟一段空间 把函数体内的代码一模一样的存储在这段空间内 把空间赋值给栈内存的变量中 函数调用阶段 按照变量名内的存储地址找到堆内存中对应的存储空间 在调用栈中开辟一个新的函数执行空间 在执行空间中进行形参赋值 在执行空间中进行

    2024年02月05日
    浏览(51)
  • vue 防抖与节流用法

    一、html 二、JS 三、公共方法 common.js

    2024年02月10日
    浏览(35)
  • JS手写防抖和节流函数(超详细版整理)

    防抖(debounce) :每次触发定时器后,取消上一个定时器,然后重新触发定时器。防抖 一般用于用户未知行为的优化 ,比如搜索框输入弹窗提示,因为用户接下来要输入的内容都是未知的,所以每次用户输入就弹窗是没有意义的,需要等到用户输入完毕后再进行弹窗提示。

    2024年02月04日
    浏览(37)
  • vue uniapp 防止按钮多次点击(类似于防抖节流)

    common文件并创建anti-shake.js文件 man.js文件中引入 页面里使用即可 不传参,直接传一个方法就行 带参数,传一个方法和一个参数就行 

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包