出现场景
按钮的重复点击、页面的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;