函数节流

出现场景

按钮的重复点击、页面的scroll、元素的拖拽等都有可能在极短的时间内，频繁调用
处理函数。这样高频率的调用可能会使程序卡慢，更甚可能导致浏览器直接崩溃。
因此，函数节流是一种解决办法。

函数节流原理

函数节流原理很简单，就是通过定时器来控制事件处理函数的调用。
即：单位时间内只触发一次处理函数，若有多次触发只有一次生效。

原生JS节流方式

/* UI层 */
<button>来呀，点我呀！</button>
/* 逻辑层 */
// 1、功能逻辑：fn为业务逻辑处理函数
const throttle = (fn) => {
	// a、设置一个flag来标记当前是否有定时器在执行
	let flag = false;
	return function () {
		let timer = null;
		if (flag) return;
		flag = true;
		timer = setTimeout(()=>{ 
			flag = false;
			// apply()方法能劫持另外一个对象的方法，继承另外一个对象的属性 
			// this指向当前触发事件的元素；arguments当前事件对象
			fn.apply(this,arguments);
			clearTimeout(timer);
		},1000);
	}
}
// 2、业务逻辑
const handleClick = (e) => {
	console.log('点击了！');
}
// 3、事件触发
const btn = document.querySelector('button');
btn.addEventListener('click',throttle(handleClick));

react函数节流方式

import React, {Component} from 'react';
// 1、确定项目中已经有Lodash工具库
// https://www.lodashjs.com/docs/4.17.5.html
import throttle from 'lodash.throttle';

class Com extends Component {
	constructor () {
		super();
		// 2、节流时间为3s
		this.handleClick = throttle(this.handleClick,3000);
	}
	handleClick = () => {
		console.log('点击了！')
	}
	componentWillUnmount() {
		// 3、组件卸载之后取消掉延迟回调
    	this.handleClick.cancel();
  	}
	render () {
		return (
			<div>
				<div onClick={this.handleClick} style={{height:'50px',background: 'blue'}}>
					点击
				</div>
			</div>
		);
	}
}
export default Com;