vue项目中实现输入框防抖功能

防抖函数的原理：

只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次；
使用场景：
防抖函数一般是用于频繁触发事件，而我们只需要它触发一次的场景，比如：输入框的oninput事件、button按钮点击事件、点赞等操作场景；
实例：
例如在vue-cli脚手架中使用防抖函数来进行提升性能
vue-cli：定义一个util.js，添加以下代码

// 函数防抖
export function debounce(fn, wait) {let timeout = null;wait = wait || 600;return function () {let that = this;if(timeout !== null)   clearTimeout(timeout);  timeout = setTimeout(() => {fn.apply(that);}, wait);}
}
//（注意：我们在vue-cli中自定义方法必须要export抛出，不然组件读取不到）

使用和引用组件：

//在需要用到的页面引入
import {debounce} from "@/utils/utils"

调用方法：

//在需要用到的页面写方法
methods: {inputNum: debounce(function(){console.log(1111);}, 1000) //这个1000代表事件延迟一秒执行}

vue项目中实现输入框防抖功能相关推荐

百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
Vscode的vue项目中下滑红线报错问题
Vscode的vue项目中下滑红线报错问题 1.报错原因代码存在语法错误(错误并不影响项目的编译运行),并且校验功能是开启状态就会出现下滑红线的报错. 2.解决方法 1)关闭校验如果项目的校验功能 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...

vue项目中实现输入框防抖功能

vue项目中实现输入框防抖功能相关推荐

最新文章

热门文章