React-防抖

最新推荐文章于 2024-07-25 17:14:51 发布

success-ladder

最新推荐文章于 2024-07-25 17:14:51 发布

阅读量331

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/successLadder/article/details/111317393

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

// React实际操作
// 两个事件 onMouseOver 和 onMouseOut

HTML：
	<div
		className='demo'
		onMouseOver={() => this.onMouseOver(record)}
		onMouseOut={this.onMouseOut}
	>

constructor：
	constructor () {
		super()
		this.state = {}
		this.onMouseOver = this.debounce(this.onMouseOver, 100)
    	this.onMouseOut = this.debounce(this.onMouseOut, 100)
	}

防抖方法：
debounce = (func, wait) => {
	let timeout
	return function () {
		let args = arguments
		clearTimeout(timeout)
		timeout = setTimeout(function () {
			func.apply(this, args)
		}, wait)
	}
}

onMouseOver = () => {
	console.log('鼠标移入回调')
}

onMouseOut = () => {
	console.log('鼠标移出回调')
}