vue项目中实现输入框防抖功能（and节流）

防抖函数的原理：

• 只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次；
  使用场景：
• 防抖函数：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。场景：input验证、搜索联想、resize
• 节流函数：指连续触发事件但是在 n 秒中只执行一次函数。
  场景：按钮点击、下拉加载、鼠标滚动、拖拽动画（节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。）

实例：
例如在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抛出，不然组件读取不到）

//函数节流const throttle = (fn, interval) => {var _self = fn, // 保存需要被延迟执行的函数引用timer, // 定时器firstTime = true; // 是否是第一次调用return function () {var args = arguments;var _me = this;if (firstTime) { // 如果是第一次调用不需要延迟_self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向return firstTime = false;}if (timer) { // 如果定时器还在，说明前一次延迟执行还没有完成return false;}timer = setTimeout(function () { // 延迟一段时间执行clearTimeout(timer);timer = null;_self.apply(_me, args); // 执行fn函数并且修正此函数中this所运行的上下文指向}, interval || 500);}}export default throttle

使用和引用组件：

//在需要用到的页面引入
import {debounce} from "@/utils/utils" //防抖
import throttle from '../utils/throttle' //节流

调用方法：

//在需要用到的页面写方法
methods: {inputNum: debounce(function(){console.log('防抖');}, 1000),//这个1000代表事件延迟一秒执行clickBtn: throttle(function () {console.log('节流')}, 1500) //1.5s内只会执行一次}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！