uniapp項目使用防抖及節流的方案實戰

Posted on by

此方案出現的理由

  • 小程序中無法使用vue.directive的指令方法函數實現防抖節流
  • 傳統的防抖節流方式相對繁瑣

實現方案及效果

  • 新建一個debounce-view組件
  • 直接用debounce-view包裹需要防抖的內容即可，如下：
<debounce-view @thTap="buyNow">
        <view class="buy-now">立即購買</view>
</debounce-view>

防抖組件內容：

//debounce-view
<template>
	<view @click.stop="deTap">
		<slot></slot>
	</view>
</template>

<script>
	function deBounce(fn, delay = 500, immediate) {
		let timer = null,
			immediateTimer = null;

		return function() {
			let args = arguments,
				context = this;

			// 第一次觸發
			if (immediate && !immediateTimer) {

				fn.apply(context, args);
				//重置首次觸發標識，否則下個周期執行時會受幹擾
				immediateTimer = setTimeout(() => {
					immediateTimer = null;
				}, delay);
			}
			// 存在多次執行時，重置動作需放在timer中執行；
			if (immediateTimer) clearTimeout(immediateTimer);
			if (timer) clearTimeout(timer);

			timer = setTimeout(() => {
				fn.apply(context, args);
				timer = null;
				immediateTimer = null;
			}, delay);
		}
	}
	export default {
		methods: {
			deTap: deBounce(function() {
				console.log('deTap')
				this.$emit('deTap')
			}, 500, true),
		}
	}
</script>

<style>
</style>

節流組件內容：

<template>
	<view @click.stop="thTap">
		<slot></slot>
	</view>
</template>

<script>
	// 第二版
	function throttle(func, wait) {
		var timeout;
		var previous = 0;

		return function() {
			context = this;
			args = arguments;
			if (!timeout) {
				timeout = setTimeout(function() {
					timeout = null;
					func.apply(context, args)
				}, wait)
			}

		}
	}
	export default {
		methods: {
			thTap: throttle(function() {
				this.$emit('thTap')
			}, 500)
		}
	}
</script>

<style>
</style>

總結

  • 上述方法有有點但也有缺點，優點是使用起來非常的快捷方便，缺點是時間目前是寫死的，各位看官如果有新的想法或者意見還請指教小弟一二

到此這篇關於uniapp項目使用防抖及節流的文章就介紹到這瞭,更多相關uniapp使用防抖及節流內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：