防抖和节流各种使用封装记录

在页面按钮上直接使用防止多次点击方法

新建一个公共Js.在main.js中引入

// 防止处理多次点击
function noMultipleClicks(methods, info) {
    // methods是点击后需要执行的函数， info是函数需要传的参数
    let that = this;
    if (that.noClick) {
        // 第一次点击
        if((info && info !== '') || info ==0) {
			that.noClick= false;
            // info是执行函数需要传的参数
			if(info==0){
				info=false
			}
            methods(info);
        } else {
			that.noClick= false;
            methods();
        }
		  
        setTimeout(()=> {
            that.noClick= true;
        }, 10000)
    } else {
        uni.showToast({
        	title:'操作过于频繁,请10秒后重试',
			icon:'none'
        })
    }
}
//导出
export default {
    noMultipleClicks,      // 禁止多次点击
}

// 配置公共方法
import common from './libs/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

使用则是 @click="$noMultipleClicks(clickImg,item)" 第一个参数是事件，第二个参数是事件需传的参数

data() {
            return {
                noClick:true,//在页面设置noClick:true
            }
        }

防抖和节流我一直老是被绕晕。目前以自己的理解封装了2个

函数防抖

原理：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时适用场景：search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源按钮提交场景，比如点赞，表单提交等，防止多次提交监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次

函数节流

原理：当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。适用场景：拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动监听滚动事件：实现触底加载更多功能屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑射击游戏中的mousedown、keydown时间

export const debounce=(cb,delay)=>{
	console.log(delay)
    let timer;
    let isFirst = true; //是否是第一次执行
    return function(...arg){
		if(timer) {
			clearTimeout(timer)
			console.log('clear')
		}
        if(isFirst){
            cb.apply(this,arg);
            isFirst = false;
        }else{
			uni.showToast({
				icon:"none",
				title:'操作过于频繁，请勿重复点击'
			})
			timer = setTimeout(()=>{
				console.log('ttttt')
			    cb.apply(this,arg);
			    isFirst = true;
			},delay)
		}
       
		
    }
}


export const thorttle=(callBack,delay,intervalTime)=>{
    var timer=null;  // 定时器变量
    var time=0;  // 时间变量
	let isFirst = true; //是否是第一次执行
    return function(){
        var context=this;
        var curTime=new Date();  // 当前执行的时间
        clearTimeout(timer);  //  清除上次的定时器
        
        if(!time){
            time=curTime;
        }
        // 当前执行时间距离上次执行的时间是否大于等于间隔时间
        if(curTime - time >= intervalTime){
            time=curTime;
            callBack.apply(context,arguments)
        }else{
			console.log('nnnn')
			if(isFirst){
				isFirst = false;
			    callBack.apply(context,arguments)
			}else{
				clearTimeout(timer);  //  清除上次的定时器
				uni.showToast({
					icon:'none',
					title:'请勿频繁点击'
				})
				if(!timer){
					timer=setTimeout(()=>{
					    callBack.apply(context,arguments)
						isFirst = true;
					},delay)
				}
				
			}
			
        }
    }
	}