vue 中使用节流和防抖(触发事件中&watch中使用)
/** fun [function] 需要防抖的函数* delay [number] 毫秒,防抖期限值*/export function debounce(fun, delay = 300) {let timer;return function () {let ctx = thislet args = argumentsif (timer) {clearTimeout(timer)}timer =
·
Tools.js
/*
* fun [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
export function debounce(fun, delay = 300) {
let timer;
return function () {
let ctx = this
let args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
timer = null
fun.apply(ctx, args)
}, delay)
}
}
/*
* fun [function] 需要节流的函数
* delay [number] 毫秒,节流期限值
*/
export function throttle(fun, interval = 300) {
let last;
let timer;
return function () {
let ctx = this
let args = arguments
let now = new Date()
if (last && now - last < interval) {
clearTimeout(timer)
timer = setTimeout(function () {
last = now
}, interval)
} else {
last = now
fun.apply(ctx, args)
}
}
}
//点击事件触发
<button @click="getCode">防抖</button>
import { debounce } from '../../utils/Tools' 在工具栏中引入防抖
// 组件数据
data() {
return {
value: '',
}
},
// 监听属性
watch: {
value() {
this.check()
}
},
// 组件方法
methods: {
//监听触发
check:debounce(function(e){
this.getorderData() //要使用防抖处理的函数方法
console.log("防抖");
},1500),
//点击事件触发
getCode:debounce(function(e){
this.getorderData() //要使用防抖处理的函数方法
console.log("防抖");
},1500),
}
更多推荐
已为社区贡献3条内容
所有评论(0)