通过实例学习React中事件节流防抖
节流
方法一
importThrottlefrom'lodash-decorators/throttle';
exportdefaultclassSearchextendsComponent{
constructor(props){
super(props)
this.handleSearch=this.handleSearch.bind(this);
}
handleSubmit=(e)=>{
e.preventDefault();
this.handleSearch();
}
@Throttle(300)
handleSearch(){
...
}
render(){
return(
方法二
importthrottlefrom'lodash/throttle';
exportdefaultclassSearchextendsComponent{
constructor(props){
super(props)
this.handleSearch=throttle(this.handleSearch,1000);
}
handleSubmit=(e)=>{
e.preventDefault();
this.handleSearch();
}
handleSearch=()=>{
...
}
render(){
return(
防抖
写法类似。。。
区别
debounce和throttle各有特点，在不同的场景要根据需求合理的选择。如果事件触发是高频但是有停顿时，可以选择debounce；在事件连续不断高频触发时，只能选择throttle，因为debounce可能会导致一段时间内动作只被执行一次，界面出现闪烁。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。