[绍棠] vue中使用lodash的debounce(防抖函数)

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

1、安装

npm i --save lodash.debounce

2、引入

import debounce from 'lodash.debounce'

3、使用

<van-search v-model="searchValue" placeholder="输入姓名或工号" @input='handleInput' />
  第一种:

    handleInput: debounce(function (val) {
      console.log(val)
    }, 200)
  第二种:

    handleInput(val) {
      console.log(val)
    }

  created() {
   this.handleInput = debounce(this.handleInput, 200) // 搜索框防抖
  }

  这两种使用方式效果一样

 ------------分割线-------------

观察者防抖:

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log('New value:', newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  },
};
</script>

事件处理器防抖:

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

为什么不在method中写好方法,在template中直接调用,就像这样

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  methods: {
    // Don't do this!
    debouncedHandler: debounce(function(event) {
      console.log('New value:', event.target.value);
    }, 500)
  }
};
</script>

组件使用 export default { ... } 导出的 options 对象,包括方法,会被组件实例重用。

如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。文章来源地址https://www.toymoban.com/news/detail-525718.html

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

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

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

相关文章

  • vue防抖 指令 v-debounce

    2024年02月16日
    浏览(37)
  • 一文搞懂如何在 React 中使用 防抖(Debounce)和 节流(Throttle)

    在前端的日常开发中,经常会使用到两个函数防抖(Debounce)和节流(Throttle),防抖函数可以有效控制在一段时间内只执行最后一次请求,例如搜索框输入时,只在输入完成后才进行请求接口。而节流函数则是每隔一段时间就执行一次请求。 在 React 应用开发时,不同于普通

    2024年02月09日
    浏览(37)
  • vue2.x通过指令实现v-debounce和v-throttle防抖节流的实现,亲测可用。

    在vue2.x中,防抖和节流一般是通过引入防抖函数 debounce 和节流函数 throtte ,对事件回调进行一层包裹,然后在模板中绑定包裹后的事件回调,这样每个需要用的地方都需要进行防抖,节流函数的导入,事件回调的包裹,比较麻烦。通过摸索,有以下两种方法。 通过重写Vue.

    2024年02月14日
    浏览(38)
  • vue使用第三方库lodash的节流函数

    说明:创建vue项目安装了lodash import throttle from \\\"lodash/throttle\\\";

    2024年02月14日
    浏览(65)
  • js监听input输入事件及使用防抖封装函数处理的实现

    循序渐进: 1.实现input框的输入监听事件: 2.防抖函数 防抖函数的目的:为了限制函数的执行频率而出现,优化解决函数触发频率过高导致延迟及假死卡顿等bug的出现。大多用在查询和提交功能上。 设置时间内多次点击或者输入只会执行最后一次点击或者输入; 代码: 3.i

    2024年02月12日
    浏览(41)
  • flutter开发实战-防抖Debounce与节流Throttler实现

    flutter开发实战-防抖Debounce与节流Throttler实现 在开发中,经常遇到某些按钮或者界面操作需要做防抖或者节流操作。这里记录一下实现。 防抖Debounce 当有可能在短时间内对一个方法进行多次调用时,需要防抖,并且希望只有最后一次调用真正调用目标方法。因此,基本上每个

    2024年02月07日
    浏览(41)
  • js中如何实现一个简单的防抖函数?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

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

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

    2024年02月04日
    浏览(37)
  • 前端面试题-js-new关键字-this指向-js事件流-防抖节流

    1.创建一个简单的空对象 2.原型的绑定,确定对象O的原型链 3.绑定this对象为O,传入参数;执行Person构造函数,进行属性和方法的赋值操作 4.返回结果 普通函数的this指向 函数的this指向有一个基本的原则,谁调用的函数,函数的this就指向谁,否则指向全局 箭头函数的this指向

    2024年01月25日
    浏览(49)
  • 消灭前端闪烁魔鬼:Vue中的防抖术

    在前端的世界里,用户操作如同一场狂风骤雨,而我们的页面则要顶住这些波澜汹涌的输入。有时候,我们希望页面在用户输入停止后再作出响应,以避免频繁触发操作。这时,Vue的防抖动技术就如同时光隧道一样,将我们带回到宁静的过去。 本篇博客将带你穿越时空,揭开

    2024年02月02日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包