性能优化之节流&防抖

1- 防抖（debounce）

什么是防抖？

debounce　防抖函数：在函数触发的n秒后执行，如果时间内重复触发，就重新计时

场景

1. 常用的输入框搜索时, 重发触发input或keyup等事件时，每次都会去请求接口，这样很浪费服务器资源
2. 交给朋友们，提供。

Code实现

	function input(val) {
		// 如果时间内重复触发即清空延时器
		if(debounceTimer) { clearTimeout(debounceTimer) }
		debounceTimer = setTimeout(() => {
			this.axios.get('xxxxx/val').then(res => {
				this.data = res.data
			})
		},666)
	}	

2- 节流 （throttle）

什么是节流？

throttle　节流函数：在某一次回调函数的成功或失败或停止后，再次执行的方法

场景

1. 表单提交，在网络延迟或服务器响应慢，用户重复提交
2. 在列表无限加载，当滚动到底部的时候进行请求数据
3. 这个也交给朋友们，欢迎提点弟弟~

Code 实现

	function throttle(fn) {
		let flag = true
		return function () {
			if(!flag) return  // 如果当前任务没有执行完, 不进行触发 
			flag = false
			setTimeout(() => {
				fn.apply(this, arguments)
				flag = true
			}, 666)
		}
	}
	
	function sayHi(e) {
		console.log(e)
	}
	
	window.addEventListener('resize',throttle(sayHi))

Vue表单提交

	data() {
		return {
			flag: true
		}
	},
	methods: {
		submit() {
			if(this.flag) {
				this.flag = false 
				this.axios.get('xxxxxxx').then(res => {
					this.data = res.data
					this.flag = true
				})
			}
		}
	}

写到节流的时候，心态有点崩，因为点私事，就这样吧，心情不太好，哥哥姐姐们，有什么问题，可以指出来哦。