通过实例学习React中事件节流防抖
程序员文章站
2023-11-12 22:44:28
节流
方法一
import throttle from 'lodash-decorators/throttle';
export default clas...
节流
方法一
import throttle from 'lodash-decorators/throttle'; export default class search extends component { constructor(props) { super(props) this.handlesearch = this.handlesearch.bind(this); } handlesubmit = (e) => { e.preventdefault(); this.handlesearch(); } @throttle(300) handlesearch() { ... } render() { return ( <form onsubmit={this.handlesubmit}><form> ) } }
方法二
import throttle from 'lodash/throttle'; export default class search extends component { constructor(props) { super(props) this.handlesearch = throttle(this.handlesearch, 1000); } handlesubmit = (e) => { e.preventdefault(); this.handlesearch(); } handlesearch = () => { ... } render() { return ( <form onsubmit={this.handlesubmit}><form> ) } }
防抖
写法类似。。。
区别
debounce 和 throttle 各有特点,在不同的场景要根据需求合理的选择。如果事件触发是高频但是有停顿时,可以选择debounce;在事件连续不断高频触发时,只能选择 throttle ,因为 debounce 可能会导致一段时间内动作只被执行一次,界面出现闪烁。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: python实现蒙特卡罗方法教程
推荐阅读