主要介绍了在vue中使用防抖函数组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

初级 1、先写好防抖函数 /** * desc 防抖函数 * param {需要防抖的函数} func * param {延迟时间} wait * param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(time

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。 一、函数防抖 定义 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。 实现原理 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。 使用场景 文本框输入搜索（连续输入时避免多次请求接口） 代码实现 /** * 函数

在一个电影项目中，我想在电影的列表中，保存下拉的当前位置，防止你切换页面后，再切换回当前的电影列表页，他就又回到电影的第一条数据。 这时候，我不想每次只要滑动一点，就保存当前位置，我想隔一段时间，保存一次，这时候，就可以使用防抖和节流。 概念 说白了， 防抖节流就是使用定时器 来实现我们的目的。 防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 典型的案例就是输入框搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，则重新计时。 节流(throt

废话不多说，直接上代码吧！ /** * 函数防抖 (只执行最后一次点击) * param fn * param delay * returns {Function} * constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () {