React事件的节流和防抖

最新推荐文章于 2024-12-22 23:27:07 发布

原创最新推荐文章于 2024-12-22 23:27:07 发布 · 759 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

前端开发常遇问题专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在前端开发中常用的两种事件处理优化方法——节流(throttle)与防抖(debounce)的技术实现及其应用场景。通过具体示例展示了如何使用lodash库来实现这两种方法，并讨论了它们之间的区别及适用场景。

节流----throttle

import throttle from 'lodash/throttle';
export default class Search extends Component {
	constructor(props) {
		super(props)
		this.handleClick = throttle(this.handleClick , 1000);
	}
	handleClick = (e) => {
		...
	}
}
	render() {
		return (
		<div onClick={this.handleClick}><div>
		)
	}
}

方法二：

import Throttle from 'lodash-decorators/throttle';
export default class Search extends Component {
	constructor(props) {
		super(props)
		this.handleClick = this.handleClick .bind(this);
	}
	@Throttle(300)
	handleClick = (e) => {
		...
	}
}
	render() {
		return (
		<div onClick={this.handleClick}><div>
		)
	}
}

防抖----debounce
方法一：

import debouncefrom 'lodash/debounce';
export default class Search extends Component {
	constructor(props) {
		super(props)
		this.handleClick = debounce(this.handleClick , 1000);
	}
	handleClick = (e) => {
		...
	}
}
	render() {
		return (
		<div onClick={this.handleClick}><div>
		)
	}
}

方法二：

import Throttle from 'lodash-decorators/debounce';
export default class Search extends Component {
	constructor(props) {
		super(props)
		this.handleClick = this.handleClick .bind(this);
	}
	@debounce(300)
	handleClick = (e) => {
		...
	}
}
	render() {
		return (
		<div onClick={this.handleClick}><div>
		)
	}
}