JS，节流、防抖。

1、节流
在规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。
具体场景可以是抢购时候，由于有无数人 快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。

<template>
	<view class="index">
		<u-button type="primary" @click="btnClick">节流</u-button>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				timer:null,
				flag:null,
			}
		},
		methods: {
			btnClick() {
				this.throttle(this.ceshi, 1000)
			},
			ceshi() {
				console.log('1秒钟内只执行一次');
			},
			
			/**
			 * 节流原理：在一定时间内，只能触发一次
			 * 
			 * @param {Function} func 要执行的回调函数 
			 * @param {Number} wait 延时的时间
			 * @param {Boolean} immediate 是否立即执行
			 * @return null
			 */
			throttle(func, wait = 500, immediate = true) {
				if (immediate) {
					if (!this.flag) {
						this.flag = true;
						// 如果是立即执行，则在wait毫秒内开始时执行
						typeof func === 'function' && func();
						this.timer = setTimeout(() => {
							this.flag = false;
						}, wait);
					}
				} else {
					if (!this.flag) {
						this.flag = true
						// 如果是非立即执行，则在wait毫秒内的结束处执行
						this.timer = setTimeout(() => {
							this.flag = false
							typeof func === 'function' && func();
						}, wait);
					}
					
				}
			}
		},
	}
</script>

2、防抖
在处理连点，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。
具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再 输入内容，这时再触发请求。

<template>
	<view class="index">
		<u-button type="primary" @click="btnClick">防抖</u-button>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				timeout: null,
			}
		},
		methods: {
			btnClick() {
				this.debounce(this.ceshi, 1000)
			},
			ceshi() {
				console.log('1秒后只有最后一次点击会执行');
			},
			
			/**
			 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
			 * 
			 * @param {Function} func 要执行的回调函数 
			 * @param {Number} wait 延时的时间
			 * @param {Boolean} immediate 是否立即执行 
			 * @return null
			 */
			debounce(func, wait = 500, immediate = false) {
				// 清除定时器
				if (this.timeout !== null) clearTimeout(this.timeout);
				// 立即执行，此类情况一般用不到
				if (immediate) {
					var callNow = !this.timeout;
					this.timeout = setTimeout(function() {
						this.timeout = null;
					}, wait);
					if (callNow) typeof func === 'function' && func();
				} else {
					// 设置定时器，当最后一次操作后，this.timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
					this.timeout = setTimeout(function() {
						typeof func === 'function' && func();
					}, wait);
				}
			}
		},
	}
</script>