Vue中使用bounce防抖函数

debounce（防抖）：当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。比如：如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

通过这个函数可以有效减少无效或者不需要的相应事件。

首先引入Js文件。

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

然后照常写响应事件。

<el-input v-model="inputValue2" @input="testChange"></el-input>

引入引用名称。

import _ from "lodash";

在data中加入inputValue2。

在mounted中构造。

mounted() {this.triggleInputChange = _.debounce(this.judgeInputValue, 1500);this.yanchi = _.debounce(this.g, 1500);},

然后写input的输入事件。在该事件中引用该函数，设置延迟时间1500毫秒。

testChange() {this.yanchi();
},
g() {console.log(this.inputValue2, "s");
},

就OK了。此时我们较快地输入123，就只响应了最后的事件。配合axios等就可完成仅响应最后一次事件等多种项目需求。

收工。

Vue中使用bounce防抖函数相关推荐

Vue中封装使用防抖函数
一.封装防抖函数 debounce(fn, time) {let timer = null;return function(...args) {let _this = this;if(timer) { ...
vue自定义指令之防抖函数
在项目中会遭遇到用户连续点击多次按钮的情况, 这个时候就需要使用防抖函数,在一定时间内只触发一次函数执行. 实现在 Vue 项目中,在 src > utils 目录下新建 Debounce.j ...
在 Vue 中正确使用防抖和节流
1. 观察者防抖 1. 在 create() 钩子里,创建防抖回调,并将其赋值到实例上:this.debouncedWatch = debounce(-, 500). 2. 在观察者回调 wa ...
Vue中data为何以函数形式返回
data为何以函数形式返回在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用 ...
关于Vue中常用的工具函数封装
## Vue 项目中工具函数,我们通常会添加到Vue的原型中,这样就实现了全局函数 import Vue from 'vue' Vue.prototype.$tools = function (){} ...
vue中v-if如何调用函数？
v-if 是显示隐藏节点,它的值是Boolean 在函数中如何调用? <div v-if="isShow()"></div> methods属性这样配置: ...
vue中的防抖函数写法
vue中的methods // 防抖方法debounce(func,delay){let timer=nullreturn function (...args) {timer && c ...
vue中mapGetters函数前面的三个点是什么意思？
今天视频面试时,被问到了,vue中mapState和mapGetter函数前面的三个点是什么意思? 今天看到了对这个问题的解答: mapState 函数返回的是一个对象.我们如何将它与局部计算属性混合 ...
vue项目中定义全局变量、函数的几种方法
定义全局变量原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1.使用 ...

Vue中使用bounce防抖函数

Vue中使用bounce防抖函数相关推荐

最新文章

热门文章