Today, when I was working on a react project, I throttled an input onKeyDown event, but the throttling effect failed. Problem code: render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.throttle(this.handleKeyDown)}/> </div> ) } throttle = (fn) => { let valid = true const context = this return function() { if (!valid) return valid = false const args = arguments fn.apply(context, args) setTimeout(() => { valid = true }, 1000); } } handleKeyDown = (e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) } The problem here is: this.props.search(value) in handleKeyDown() method In this way, the throttle() method will be re-executed; throttle = (fn) => { console.log('%c throttle initialization', 'color: red'); let valid = true const context = this return function() { if (!valid) return valid = false const args = arguments fn.apply(context, args) setTimeout(() => { valid = true }, 1000); } } If you add printing to the code, you will see throttle initialization print multiple lines in the console; Solution 1:Put the throttling initialization position into the event function assignment render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/> </div> ) } handleKeyDown = this.throttle((e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) }) Solution 2: Assign initialization in the constructorrender() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/> </div> ) } constructor(props) { super(props) this.handleKeyDown = this.throttle(this.handleSearch) } handleSearch = (e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) } Summary of mining pits:To better understand the triggering mechanism of the react life cycle The above is the detailed content of the reasons and solutions for the failure of React event throttling effect. For more information about the failure of React event throttling effect, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Examples of optimization techniques for slow query efficiency in MySQL IN statements
>>: Explanation of Linux kernel optimization configuration for high-concurrency nginx server
Preface This article introduces the use of vue-ro...
Table of contents Target Thought Analysis Code la...
Since Zabbix version 3.0, it has supported encryp...
Detailed description of media device type usage: ...
SSH public key authentication is one of the SSH a...
background Basic Concepts CSS filter property app...
Preface I have seen many articles about the leftm...
As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...
This tutorial shares the installation and configu...
In previous blog posts, I have been focusing on so...
First, let me introduce the meaning of some field...
Table of contents 【Effect】 【Implementation method...
This article briefly describes how to use Docker ...
The installation tutorial of MySQL 5.7.27 is reco...
Install Make sure your user has permission to ins...