函数防抖 事件触发后延迟执行动作,适用于频繁触发的事件,如在百度搜索输入搜索内容,输入时不执行搜索,停止输入后经过一小段延迟执行搜索展示搜索结果。 函数防抖的实现关键是对setTimeout函数的应用 此为笔者项目中的搜索例子
// 查询 searchChange = (val) => { if (val) { this.setState({ searchVal: val }); //实时变化值 clearTimeout(this.settimeId); //如搜索的内容变化在1秒之内,会清除一秒内的请求,记时重新开始 this.settimeId = setTimeout(() => { this.setState({ dataUrl: this.urlReplace(this.state.dataUrl, "sfname", val) }) }, 1000); //让每次要进行请求时先延迟1秒在进行 } else { this.setState({searchVal: '' }); clearTimeout(this.settimeId); this.settimeId = setTimeout(() => { this.setState({ dataUrl: this.urlReplace(this.state.dataUrl, "sfname", '') }) }, 1000); } };函数节流 在固定时间内只触发一次操作,在周期内新事件触发不执行动作。如一秒内重复多次点击提交按钮,只执行一次操作。 实现关键是flag和setTimeout的应用
this.flag = true; //按钮提交事件 handleSubmit(){ if(!this.flag) return false; this.flag = false; setTimeout(()=>{ console.log("提交"); this.flag = true; },1000); };