防抖函数的原理:
只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;
使用场景:防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的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代表事件延迟一秒执行}