300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue项目中实现输入框防抖功能

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

时间:2018-09-28 11:24:14

相关推荐

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代表事件延迟一秒执行}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。