直接上代码,不墨迹!
import React, { Component } from 'react';
import './App.css';
interface IProps {
[propName:string]:any;
}
interface IState {
timer?:number;
}
export default class App extends Component<IProps, IState> {
constructor(props:IProps) {
super(props)
this.state = {}
}
componentDidMount = () => {
}
clickHandle = (name:string):void=>{
console.log(`${name},您好!!`);
}
/**
* @methods throttle
* @desc 节流阀
* @param fn 需要节流的函数
* @param delay 延迟时间
* @param args 需要节流的函数传递的参数
*/
throttle = (fn:any, delay?:number, ...args:any[]):any=>{
let timeout:NodeJS.Timeout | undefined;
const defaultTimeOut = 1000;
return function (this:any) {
if (!timeout ) {
fn.apply(this, args);
timeout = setTimeout(() => {
timeout = undefined;
}, delay || defaultTimeOut);
}
}
}
render() {
return (
<div className='wrap'>
<button onClick={this.throttle(this.clickHandle, 1000, "小明")}> 点我测试点击事件</button>
</div>
)
}
}