防抖节流在vue中的使用

//防抖
function debounce3(fn, wait, isImmediate = false) {
    let timerId = null;
    let flag = true;
    return function () {
        let context = this
        let args = arguments
        clearTimeout(timerId)
        if (isImmediate) {
            if (flag) {
                fn.apply(context, args)
                flag = false
            }
            timerId = setTimeout(function () {
                flag = true
            }, wait)
        } else {
            timerId = setTimeout(function () {
                fn.apply(context, args)
            }, wait)
        }
    }
}


//节流
let throttle = (fn,delay) => {
	//进入的时间，其实就是用户什么时候 触发 的 滚动条
	let enterTime = 0; 
	let gapTime = delay || 200; //间隔时间
	return function(){
		let context = this;
		//第一次 执行 return 里面的匿名函数方法的时间
		let backTime = new Date(); 
		// 用户 触发 到 执行是需要时间的，因此 如果 执行匿名函数方法的时间 减去 出发的时间 大于间隔的时间，就进行函数的触发；
		if(backTime - enterTime > gapTime){ 
			fn.apply(context,arguments);
			//把执行匿名函数方法的时间保存 到 触发的时间，以便 第二次运行函数
			enterTime = backTime 
		}
	}
}

export {
    debounce3，throttle 
}

V3使用

//页面使用
<button @click="b(666)">
  123
</button>
const b=debounce3(function(i){
console.log(i,bbb.value);
},2000,true)


const b=throttle(function(i:number){
console.log(bbb.value);
},2000)

V2

<button @click="b('444')">d</button>


b:debounce3(function(i){
console.log(i,this.mod);
},2000,true),


b:throttle(function(i){
console.log(i,this.mod);
},8000),