uniapp微信小程序常用防抖函数及调用

我会带着你远行 2022-10-31 10:52 271阅读 0赞

## 先看代码，复制使用即可。（防抖一般用于按钮使用，避免如登陆，购买等多次调用，如多次点击购买按钮在网速较慢下可能生成多个订单信息等） ##

### 这里只是一个封装调用的简单流程，如您使用我们官方产品 uview， 防抖参考: [throttle & debounce节流防抖][throttle _ debounce]. ###

### 您需要先定义一个js文件 复制以下代码 ###

//防抖原理：一定时间内，只有最后一次操作，再过times毫秒后才执行函数
    let timeout = null;
    				// 执行函数 时间 是否立即执行
    function debounce(func, times = 500, immediate = false) { 
    	// 清除定时器
    	if (timeout !== null) clearTimeout(timeout);
    	// 立即执行，传true 则不进行防抖 一般不传递第三个参数
    	if (immediate) { 
    		var callNow = !timeout;
    		timeout = setTimeout(function() { 
    			timeout = null;
    		}, times);
    		if (callNow) typeof func === 'function' && func();
    	} else { 
    		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时times毫秒后执行func回调方法
    		timeout = setTimeout(function() { 
    			typeof func === 'function' && func();
    		}, times);
    	}
    }
    
    export default debounce

### 调用方式如下 ###

import debounce from '配置路径'
    methods:{ 
    	//不需要自定义 时间和立即执行时
    	getCode:debounce(function(){ 
    		//您的逻辑操作
    	})
    	//需要自定义 时间和立即执行时
    	getCode:debounce(function(){ 
    		//您的逻辑操作
    	},1000,true)
    }

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

[throttle _ debounce]: https://uviewui.com/js/debounce.html