当触发点击事件,发起请求,如果没有做防抖处理,很容易发起多次请求
1.在main.js中将js包引入,挂载在全局使用
import Vue from 'vue'
import App from './App'
// 1.先在全局引入
import debounce from "@/common/debounce"
Vue.config.productionTip = false
App.mpType = 'app'
// 2.再挂载在全局
Vue.prototype.$debounce = debounce;
const app = new Vue({
mounted: init,
...App
})
app.$mount()
}
2.在点击事件函数名 换为 防抖函数名
<button @click="touchOffDebounce">提交</button>
3.将需要添加防抖的函数写在函数中即可。
//提交增加防抖
touchOffDebounce(){
// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
// 第二个为延时执行函数的时间
// 第三个是否立即执行
this.$debounce(this.submit, 2000, true)
},
submit() {
// 需要添加防抖事件的函数
}
4.将这段代码封装为js包,放入项目(在网上找的别人封装好的包,不知道出处在哪了)
let timeout = null;
/**
* 防抖原理:一定时间内,只有最后一次 *** 作,再过wait毫秒后才执行函数
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
function debounce(func, wait = 300, immediate=false) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);
if (immediate) {
// 立即执行,此类情况一般用不到
var callNow = !timeout;
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) typeof func === 'function' && func();
} else {
// 设置定时器,当最后一次 *** 作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
timeout = setTimeout(function() {
typeof func === 'function' && func();
}, wait);
}
}
export default debounce
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)